Dyanmically Adding Rows

Ads
 

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>

Ads









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
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 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
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
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
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
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
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
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
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
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 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
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
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
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...);   $num_rows = mysql_num_rows($result);   
how to write a query for adding records in database
how to write a query for adding records in database  How write fire query in JSP for adding records in database
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

Ads