0

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

<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

2
Contributors
1
Reply
5
Views
6 Years
Discussion Span
Last Post by Airshow
0

You need to suppress renumbering after deleting a row.

For row[1]+ renumbering of the previous row has already happened. Unnecessary, though no error thrown.

For row[0] an error will be thrown because i-- gives table.rows[-1] - illegal index.

...
else{
    table.rows[i].cells[1].childNodes[0].nodeValue=i+1;
}
...

Airshow

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.