Member Avatar for azegurb

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
  • 134 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.