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