Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Answers Viewqa Date-Calendar Dyanmically Adding Rows
Login         

View Questions and Answers by Category

Advertisements


 
Have Programming Question? Ask it here!
 
 
 


Santhosh Rajendran
Dyanmically Adding Rows
1 Answer(s)      2 years and a month ago
Posted in : Date-Calendar


Hi sir Am doing project in that i need to add date picker in dynamically adding rows but the dates are storing in first test box only ill paste my code debug that code as soon as possible.

Regards, Santhosh..

<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <link rel="stylesheet" type="text/css" href="css/masterStyle.css" />
    <link rel="stylesheet" type="text/css" href="css/masterStyle.css" />
        <script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
       <link rel="stylesheet" type="text/css" href="datepicker.css"/>
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" href="/resources/themes/master.css" type="text/css" />
<link
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
 rel="stylesheet" type="text/css" />
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
 type="text/javascript"></script>
<script
 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
 type="text/javascript"></script>
<script
 src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"
 type="text/javascript"></script>
<script src="/resources/scripts/mysamplecode.js" type="text/javascript"></script>
    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;

                }
            }
        }


        $(document).ready(function() {

             var myCounter = 1;
             $(".myDate").datepicker();

             $("#moreDates").click(function(){

              $('.myTemplate')
               .clone()
               .removeClass("myTemplate")
               .addClass("additionalDate")
               .show()
               .appendTo('#importantDates');

              myCounter++;
              $('.additionalDate input[name=inputDate]').each(function(index) {
               $(this).addClass("myDate");
               $(this).attr("name",$(this).attr("name") + myCounter);
              });

              $(".myDate").on('focus', function(){
                  var $this = $(this);
                  if(!$this.data('datepicker')) {
                   $this.removeClass("hasDatepicker");
                   $this.datepicker();
                   $this.datepicker("show");
                  }
              });

             });

            });

    </SCRIPT>
</HEAD>
<BODY>
 <form name="frm">
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />



    <TABLE id="dataTable" width="350px" border="1">

        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD><INPUT type="text" name="txt"/></TD>
            <td><select name="expYears">
                                 <%
                                        for (int i = 0; i < 10; i++) {

                            %>
                            <option value="<%=i%>"><%=i%></option>
                            <%
                                        }
                            %>
                         </select></td>

            <TD>
                <SELECT name="primaryskill">
                    <option value="">Select Skills</option>
                         <option value="Java">Java</option>
                         <option value=".NET">.NET</option>
                         <option value="Database">Database</option>
            </TD>
             <td><input  type="text" name="date" id="cdate">


<input type=button value="Select Date" onclick="displayDatePicker('date', this);">
</td>
           <TD><input type="text" id="dates" name="availabilityexpires" size="30">


                         <a href="javascript:NewCal('dates','DDMMYYYY',false,24)"><img src="cal.gif"  alt="Pick a date"></a></TD>
            <TD><div id="importantDates">

       <p>
        <input class="myDate" type="text" name="inputDate1" size="10" value=""/> (mm/dd/yyyy)
       </p>

      </div></TD>
        </TR>
    </TABLE>
 </form>
</BODY>
</HTML>

Advertisement
View Answers

November 19, 2012 at 5:45 PM


Here is a code that allow the user to add and remove row from the table.

<HTML>
<HEAD>
    <TITLE> Add/Remove rows</TITLE>
    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "text";
            cell1.appendChild(element1);



            var cell3 = row.insertCell(1);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell3.appendChild(element2);


        }

        function deleteRow(tableID) {

            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            var lastRow = table.rows.length;
            if (lastRow > 1) table.deleteRow(lastRow - 1);
        }

    </SCRIPT>
</HEAD>
<BODY>

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="text" /></TD>

            <TD> <INPUT type="text" /> </TD>
        </TR>
    </TABLE>

</BODY>
</HTML>


Related Tutorials/Questions & Answers:
Dyanmically Adding Rows
Dyanmically Adding Rows  Hi sir Am doing project in that i need to add date picker in dynamically adding rows but the dates are storing in first test... rows in HTML table </TITLE> <link rel="stylesheet" type="text/css
Dyanmically Adding Rows with Date Picker
Dyanmically Adding Rows with Date Picker  Hi Sir, I am doing a project in that i need to add rows dynamically with date picker inside row, send me code as soon as possible. Regards, Santhosh
Advertisements
Adding checkbox in table using that delete table rows
Adding checkbox in table using that delete table rows  I need coding... that checkbox select more than than one rows,and using delete button i want to delete the selected rows using swing in java
Adding an employee
Adding an employee  coding for adding an employee
adding a dialogue
adding a dialogue  Blockquote Hi can you help with the program below,the program is a loop that prints out a code and a quantity when prompt for the user input.what I need is to modify the code to incorporate a dialogue asking
adding loop
adding loop  Hi I have a program that is not compiling when I add a loop can you help me?The program below is compiling without the loop. > Blockquote mport java.util.*; import java.text.*; import java.util.Scanner
jtable-adding a row dynamically
jtable-adding a row dynamically  hi..i am doing a project... the application there are 3 rows and 4 columns which is default bt when we we have... time if we run a project it must show the default 3 rows and 4 columns
Adding two numbers
Adding two numbers  Accepting value ffrom the keyboard and adding two numbers
Comparison of corresponding rows in a DB
Comparison of corresponding rows in a DB  How to compare corressponding rows in a database using Java????? ex...!!! Thankin u
Count Rows - JSP-Servlet
Count Rows  How to count rows in Java. Thanks
Grid rows delete issue
Grid rows delete issue  I have a grid having rows with Remove button to remove rows,But we also havae an facility to remove those rows on onchange event of dropdown also,so if we delete middle row and then remove all rows
adding groups in contacts
adding groups in contacts  how to add groups in contacts using servlet and jsp????pls help.thanku in advance
adding view to viewcontroller
adding view to viewcontroller  How to add a frame window that opens on button click .. in iPhone application
javascript adding a value to an array
javascript adding a value to an array  How to add a value to a function argument or an array in JavaScript
Adding photo to iPhone simulator
Adding photo to iPhone simulator  Hi, there is no photo in my iPhone simulator.. how can i add one? Please suggest. Thanks
adding buttons - Swing AWT
adding buttons  can u plzz explain how to add button to a dialog box and make them perform some event on the image loaded on the panel
adding buttons - Swing AWT
adding buttons  can u plzz explain how to add button to a dialog box and make them perform some event on the image loaded on the panel
adding the delete code
adding the delete code  hello sir... i need to add a delete button... { ArrayList<String> rows = new ArrayList<>(); FileWriter...); Collections.sort(rows); writer = new FileWriter("User.dat
Dynamically adding textbox and labels
Dynamically adding textbox and labels  Sir, In my application I want to insert texbox and labels dynamically and want to insert database field value in that generated label. Plz help me, Thanks in advance
Adding Jar into Eclipse
Adding Jar into Eclipse  Hi, Please provide Step by step procedure to add jar, tld files and configurations in Eclipse Helios version and i am using Jboss5. Thanks&Regards, Shiva s
testcase for adding - JUNIT
testcase for adding  hi deepak...I am new to junit.can u send me a JUnit test case for adding or multiplying of two numbers.please i need it urgently
Adding images in itext pdf
Adding images in itext pdf  Hi, How to add image in pdf file using itext? Thanks   Hi, You can use following code: PdfWriter.getInstance(document,new FileOutputStream("imagesPDF.pdf")); Read more at Inserting
webservices adding in eclipse
webservices adding in eclipse  hi team, i am working on webservices, please guide me how to add webservices in eclispe with step by step and give some examples also.   Please visit the following link: http
Adding customitem in canvas in J2ME?
Adding customitem in canvas in J2ME?  In J2ME how should we add a customitem inside the canvas.Because i need to perform key event handling for customitem.The key event handling is allowed in canvas not in form.So i try to use
How to sort the rows in SQL?
How to sort the rows in SQL?  How to sort the rows in SQL?   Hi, Here is the answer, The ORDER BY clause allows you to sort the records in your result set. The ORDER BY clause can only be used in SELECT statements
Java: Adding Row in JTable
Java: Adding Row in JTable   how about if we already have the JTAble created earlier. And i just found nothing to get its DefaultTableModel, thus, I can't call insertRow() method. Is there any work around for this? I found
How to insert rows in jTable?
How to insert rows in jTable?  Hi, I need to take input from user using JTable. I want an empty row to appear after clicking a insert button. The values will be entered in this empty row. I have searched on this but could
Adding JTable into existing Jframe.
Adding JTable into existing Jframe.  i need to add JTable into this code pls help me.. package Com; import Com.Details; import java.awt.Color...(100,60,1300,600); add(pane); //Action Listener for button //for adding new
Adding JTable into existing Jframe.
Adding JTable into existing Jframe.  i need to add JTable into this code pls help me.. package Com; import Com.Details; import java.awt.Color...(100,60,1300,600); add(pane); //Action Listener for button //for adding new
Adding JTable into existing Jframe.
Adding JTable into existing Jframe.  i need to add JTable into this code pls help me.. package Com; import Com.Details; import java.awt.Color...(100,60,1300,600); add(pane); //Action Listener for button //for adding new
Adding checkbox to List as item
Adding checkbox to List as item   can we add checkox to List   Hi Friend, Try the following code: import java.awt.*; import javax.swing.*; import java.awt.event.*; public class CheckBoxInList{ public static void
 

 

 

DMCA.com