help with deleting rows

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • azegurb
    New Member
    • Sep 2009
    • 32
    #1

    help with deleting rows

    hi all
    i have taken from internet a script that adds and removes rows
    but i made a little changes to that script that is renumbering rows after deleting.
    but one problem arises. i can delete all rows by selecting at once except firts row. for ex. i have added 10 rows and i chose 9-th of them i delete them with no problem. but when i choose the first row it deletes one by one and displays error. if possible can anyone tell me why the error displays when choosing first row (no matter only first row or all rows with the first row also)
    my script is below
    Code:
    <HTML> 
<HEAD> 
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
    <SCRIPT language="javascript"> 
    var rowCount = 0; 
        function addRow(tableID) { 
rowCount++; 
            var table = document.getElementById(tableID); 

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

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

            var cell2 = row.insertCell(1); 
            cell2.innerHTML = rowCount + 1; 
         

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

        } 

        function delete() { 
            try { 
            var table = document.getElementById('dataTable'); 
            var rowCount = table.rows.length; 

            for(var i=0; i<rowCount; i++) { 
                var row = table.rows[i]; 
                var chkbox = table.rows[i].cells[0].childNodes[0]; 
                var soz = table.rows[i].cells[1]; 
                if(null != chkbox && true == chkbox.checked) { 
                    if(     
                    table.deleteRow(i); 
                    rowCount--; 
                    i--; 
                 
                } 
                 
table.rows[i].cells[1].childNodes[0].nodeValue=i+1; 
             
            } 
             
             
            }catch(e) { 
                alert(e); 
            } 
        } 

    </SCRIPT> 
</HEAD> 
<BODY> 

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

    <INPUT type="button" value="Delete Row" onclick="delete()" /> 

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

</BODY> 
</HTML>
    thanks in advance for attention
    Tags: None
    • Sudaraka
      New Member
      • Jan 2011
      • 55
      #2
      First thing, "delete" is a reserved word in JavaScript so you should avoid using that as your function name (although some browsers allow it).
      I think your problem will be solved if you proceed without doing the renumbering when a row is deleted. In other words continue the loop after deleting the record.

      Code:
      <HTML> 
<HEAD> 
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
    <SCRIPT language="javascript"> 
    var rowCount = 0; 
        function addRow(tableID) { 
rowCount++; 
            var table = document.getElementById(tableID); 
 
            var z=table.rows.length; 
            if(rowCount>z) 
            rowCount=z; 
            var row = table.insertRow(rowCount); 
 
            var cell1 = row.insertCell(0); 
            var element1 = document.createElement("input"); 
            element1.type = "checkbox"; 
            cell1.appendChild(element1); 
 
            var cell2 = row.insertCell(1); 
            cell2.innerHTML = rowCount + 1; 
 
 
            var cell3 = row.insertCell(2); 
            var element2 = document.createElement("input"); 
            element2.type = "text"; 
            cell3.appendChild(element2); 
 
        } 
 
        function deleteRow() { 
            try { 
            var table = document.getElementById('dataTable'); 
            var rowCount = table.rows.length; 
 
            for(var i=0; i<rowCount; i++) { 
                var row = table.rows[i]; 
                var chkbox = table.rows[i].cells[0].childNodes[0]; 
                var soz = table.rows[i].cells[1]; 
                if(null != chkbox && true == chkbox.checked) { 
                    //if(     
                    table.deleteRow(i); 
                    rowCount--; 
                    i--; 
                    
                    continue;
                } 
 
				table.rows[i].cells[1].childNodes[0].nodeValue=i+1; 
 
            } 
 
 
            }catch(e) { 
                alert(e); 
            } 
        } 
 
    </SCRIPT> 
</HEAD> 
<BODY> 
 
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
 
    <INPUT type="button" value="Delete Row" onclick="deleteRow()" /> 
 
    <TABLE id="dataTable" width="350px" border="1"> 
        <TR> 
            <TD><INPUT type="checkbox" name="chk"/></TD> 
            <TD> 1 </TD> 
            <TD> <INPUT type="text" /> </TD> 
        </TR> 
    </TABLE> 
 
</BODY> 
</HTML>

        Comment

        Previous template Next
        Working...