CODEWITHSUNDEEP
javascripthtml
sunleo
sunleo

Reputation: 10943

Remove no of rows in html table using javascript

Add no of rows dynamically everytime deleting the existing reocds is not working only single new row is getting created.Here I tried to create new 3 rows.Please hlep me.

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

function addRow(tableID) 
        {     
            var table = document.getElementById(tableID);                
            deleteRow(tableID);
            for(i=0;i<3;i++)
            {
              var rowCount = table.rows.length;
              var row = table.insertRow(rowCount);
              var cell0 = row.insertCell(i);
              var element0 = document.createElement("input");
              element0.type = "text";
              element0.name = "txtbox[]";
              cell0.appendChild(element0);

              var cell1 = row.insertCell(i+1);
              var element1 = document.createElement("input");
              element1.type = "text";
              element1.name = "txtbox[]";
              element1.value = tableID+"_"+rowCount+"_newschedule";
              cell1.appendChild(element1);
           }    
        }

        function deleteRow(tableID) {
            try 
             {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;                
                for(i =(rowCount-1);i>=0;i--)
                 {
                   table.deleteRow(i);
                 }

              }
           catch(e)
             {                    
             }
        }

Upvotes: 0

Views: 376

Answers (1)

yogi
yogi

Reputation: 19591

Try this

function addRow(tableID) {
            var table = document.getElementById(tableID);
            deleteRow(tableID);
            for (i = 0; i < 3; i++) {
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);

                var cell0 = row.insertCell(0);
                var element0 = document.createElement("input");
                element0.type = "text";
                element0.name = "txtbox[]";
                cell0.appendChild(element0);

                var cell1 = row.insertCell(1);
                var element1 = document.createElement("input");
                element1.type = "text";
                element1.name = "txtbox[]";
                element1.value = tableID + "_" + rowCount + "_newschedule";

                cell1.appendChild(element1);
            }
        }

These two lines were wrong

var cell0 = row.insertCell(i);
var cell1 = row.insertCell(i+1);

Because insertCell(i) takes the index of the cell(TD) to be added in the row(TR) but after first iteration your i becomes 1 and then you try to insert the cell at index 1 before inserting a cell at 0 and then you get's an index error.

Upvotes: 1

Related Questions