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 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>
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
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
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
ModuleNotFoundError: No module named 'rows'
ModuleNotFoundError: No module named 'rows'  Hi, My Python program is throwing following error: ModuleNotFoundError: No module named 'rows' How to remove the ModuleNotFoundError: No module named 'rows' error
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 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
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,ADS_TO_REPLACE_1 The ORDER BY clause allows you to sort the records in your result set. The ORDER BY clause can only be used
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 two numbers
Adding two numbers  Accepting value ffrom the keyboard and adding two numbers
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 view to viewcontroller
adding view to viewcontroller  How to add a frame window that opens on button click .. in iPhone application
adding groups in contacts
adding groups in contacts  how to add groups in contacts using servlet and jsp????pls help.thanku in advance
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
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 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 sADS_TO_REPLACE_1
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 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
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 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
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
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:ADS_TO_REPLACE_1 import java.awt.*; import javax.swing.*; import java.awt.event.*; public class CheckBoxInList
Php Sql num rows
Php Sql num rows This example illustrates how to find number of rows... and find the number of rows of the table by mysql_num_rows methods. The output..._rows($result);   echo "<b>$num_rows Rows 
MySQL Affected Rows
MySQL Affected Rows This example illustrates how to show the affected rows...; Query OK, 0 rows affected (0.08 sec)   Here update a table...   Query OK, 0 rows affected (0.00 sec) Rows matched: 1
JavaScript Hide Table Rows
JavaScript Hide Table Rows...; In this section, you will learn how to hide table rows using JavaScript... object grabs the id of the table. Then we have determined the length of rows
Php Sql Number of Rows
Php Sql Number of Rows  This example illustrates how to count the rows... of rows of the table. To find the number of the rows we use the mysql_num_rows..._of_rows = mysql_num_rows($res);     print("
return all rows mysql php
return all rows mysql php  How to find or return results that are not available in another table .. using join method in PHP and MYSql.   SELECT * FROM Declined LEFT JOIN Request ON Declined.RequestID
SQL select statement doesn't return any rows,
SQL select statement doesn't return any rows,  When an SQL select statement doesn't return any rows, is an SQLException thrown
MySQL Affected Rows
MySQL Affected Rows       When we execute Sql query, it may affect some rows of the table... the successful message with the number of rows affected by the query
Adding button to each row for the table and adding row to another table
Adding button to each row for the table and adding row to another table  Hi I need to add button to each line in the table(Table data is retrived form database) and need to add that column data which we click in the specified
HOW TO DISPLAY 2 ROWS OF CONTROLS
HOW TO DISPLAY 2 ROWS OF CONTROLS  i can be display one row by selecting value from drop down box BUT ALSO i need to display 2 rows by selecting value from drop down box of textbox's and radio button,drop down box using
Write a query to find the total number of rows in a table
Write a query to find the total number of rows in a table  Write a query to find the total number of rows in a table?   Hi, Here is the answer,ADS_TO_REPLACE_1 we can find the total number of rows in a table using
problem in adding a fullscreen frame nd adding a glass pane to it
problem in adding a fullscreen frame nd adding a glass pane to it  hi , here is my code import java.awt.*; import javax.swing.*; import java.awt.ToolKit; class MyFrame extends Jframe{ Container c; JPanel glass; MyFrame
Shading Rows in JTable
Shading Rows in JTable     ... the shading rows in JTable. But, the question arises what is shading?.  Shading Rows: In JTable component the shading rows are the simplest way of shading
Adding a text file - Java Beginners
Adding a text file  Hello, I need a program that will search a text file of strings representing numbers of type int and will write the largest and the smallest numbers to the screen. The file contains nothing but strings
Example code of adding placeholder in UItextFeild
Example code of adding placeholder in UItextFeild  Ho to add add the placeholder text in UITextField in IOS program programmatically? Thanks   HI, Its easy to add the placeholder in UITextfield programmatically. Here
adding one element in dictionary python
adding one element in dictionary python  Hi, I am looking for code for adding one element in dictionary python. Thanks   Hi, Here is sample code: dict ={"name":"Rose India"} print(dict) #add one more element dict
Adding .txt files in a given directory
Adding .txt files in a given directory  I want to read number of XML files from a given directory and extract tag value from body tag and add each tag value as one .txt file in a given directory? I have extracted tag values
Adding a Reports tap in table pool
Adding a Reports tap in table pool  strong textHow to write a code to create a report in java using eclipse and link that report in jsp file that is written in jsf. I have to edit a jsp file that is written jsf there is a table
Adding maven plugin to Eclipse ide
Adding maven plugin to Eclipse ide  Hi, I want to add the maven plugin to Eclipse ide. But it asking logging credential. May i know which logging credentials and who we get the logging credentials . Given process i am using

Ads