By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,992 Members | 967 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,992 IT Pros & Developers. It's quick & easy.

help with deleting rows

P: 32
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
Expand|Select|Wrap|Line Numbers
  1. <HTML> 
  2. <HEAD> 
  3.     <TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
  4.     <SCRIPT language="javascript"> 
  5.     var rowCount = 0; 
  6.         function addRow(tableID) { 
  7. rowCount++; 
  8.             var table = document.getElementById(tableID); 
  9.  
  10.             var z=table.rows.length; 
  11.             if(rowCount>z) 
  12.             rowCount=z; 
  13.             var row = table.insertRow(rowCount); 
  14.  
  15.             var cell1 = row.insertCell(0); 
  16.             var element1 = document.createElement("input"); 
  17.             element1.type = "checkbox"; 
  18.             cell1.appendChild(element1); 
  19.  
  20.             var cell2 = row.insertCell(1); 
  21.             cell2.innerHTML = rowCount + 1; 
  22.  
  23.  
  24.             var cell3 = row.insertCell(2); 
  25.             var element2 = document.createElement("input"); 
  26.             element2.type = "text"; 
  27.             cell3.appendChild(element2); 
  28.  
  29.         } 
  30.  
  31.         function delete() { 
  32.             try { 
  33.             var table = document.getElementById('dataTable'); 
  34.             var rowCount = table.rows.length; 
  35.  
  36.             for(var i=0; i<rowCount; i++) { 
  37.                 var row = table.rows[i]; 
  38.                 var chkbox = table.rows[i].cells[0].childNodes[0]; 
  39.                 var soz = table.rows[i].cells[1]; 
  40.                 if(null != chkbox && true == chkbox.checked) { 
  41.                     if(     
  42.                     table.deleteRow(i); 
  43.                     rowCount--; 
  44.                     i--; 
  45.  
  46.                 } 
  47.  
  48. table.rows[i].cells[1].childNodes[0].nodeValue=i+1; 
  49.  
  50.             } 
  51.  
  52.  
  53.             }catch(e) { 
  54.                 alert(e); 
  55.             } 
  56.         } 
  57.  
  58.     </SCRIPT> 
  59. </HEAD> 
  60. <BODY> 
  61.  
  62.     <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
  63.  
  64.     <INPUT type="button" value="Delete Row" onclick="delete()" /> 
  65.  
  66.     <TABLE id="dataTable" width="350px" border="1"> 
  67.         <TR> 
  68.             <TD><INPUT type="checkbox" name="chk"/></TD> 
  69.             <TD> 1 </TD> 
  70.             <TD> <INPUT type="text" /> </TD> 
  71.         </TR> 
  72.     </TABLE> 
  73.  
  74. </BODY> 
  75. </HTML>
thanks in advance for attention
Jan 15 '11 #1

✓ answered by Sudaraka

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.

Expand|Select|Wrap|Line Numbers
  1. <HTML> 
  2. <HEAD> 
  3.     <TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
  4.     <SCRIPT language="javascript"> 
  5.     var rowCount = 0; 
  6.         function addRow(tableID) { 
  7. rowCount++; 
  8.             var table = document.getElementById(tableID); 
  9.  
  10.             var z=table.rows.length; 
  11.             if(rowCount>z) 
  12.             rowCount=z; 
  13.             var row = table.insertRow(rowCount); 
  14.  
  15.             var cell1 = row.insertCell(0); 
  16.             var element1 = document.createElement("input"); 
  17.             element1.type = "checkbox"; 
  18.             cell1.appendChild(element1); 
  19.  
  20.             var cell2 = row.insertCell(1); 
  21.             cell2.innerHTML = rowCount + 1; 
  22.  
  23.  
  24.             var cell3 = row.insertCell(2); 
  25.             var element2 = document.createElement("input"); 
  26.             element2.type = "text"; 
  27.             cell3.appendChild(element2); 
  28.  
  29.         } 
  30.  
  31.         function deleteRow() { 
  32.             try { 
  33.             var table = document.getElementById('dataTable'); 
  34.             var rowCount = table.rows.length; 
  35.  
  36.             for(var i=0; i<rowCount; i++) { 
  37.                 var row = table.rows[i]; 
  38.                 var chkbox = table.rows[i].cells[0].childNodes[0]; 
  39.                 var soz = table.rows[i].cells[1]; 
  40.                 if(null != chkbox && true == chkbox.checked) { 
  41.                     //if(     
  42.                     table.deleteRow(i); 
  43.                     rowCount--; 
  44.                     i--; 
  45.  
  46.                     continue;
  47.                 } 
  48.  
  49.                 table.rows[i].cells[1].childNodes[0].nodeValue=i+1; 
  50.  
  51.             } 
  52.  
  53.  
  54.             }catch(e) { 
  55.                 alert(e); 
  56.             } 
  57.         } 
  58.  
  59.     </SCRIPT> 
  60. </HEAD> 
  61. <BODY> 
  62.  
  63.     <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
  64.  
  65.     <INPUT type="button" value="Delete Row" onclick="deleteRow()" /> 
  66.  
  67.     <TABLE id="dataTable" width="350px" border="1"> 
  68.         <TR> 
  69.             <TD><INPUT type="checkbox" name="chk"/></TD> 
  70.             <TD> 1 </TD> 
  71.             <TD> <INPUT type="text" /> </TD> 
  72.         </TR> 
  73.     </TABLE> 
  74.  
  75. </BODY> 
  76. </HTML>

Share this Question
Share on Google+
1 Reply


Sudaraka
P: 55
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.

Expand|Select|Wrap|Line Numbers
  1. <HTML> 
  2. <HEAD> 
  3.     <TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
  4.     <SCRIPT language="javascript"> 
  5.     var rowCount = 0; 
  6.         function addRow(tableID) { 
  7. rowCount++; 
  8.             var table = document.getElementById(tableID); 
  9.  
  10.             var z=table.rows.length; 
  11.             if(rowCount>z) 
  12.             rowCount=z; 
  13.             var row = table.insertRow(rowCount); 
  14.  
  15.             var cell1 = row.insertCell(0); 
  16.             var element1 = document.createElement("input"); 
  17.             element1.type = "checkbox"; 
  18.             cell1.appendChild(element1); 
  19.  
  20.             var cell2 = row.insertCell(1); 
  21.             cell2.innerHTML = rowCount + 1; 
  22.  
  23.  
  24.             var cell3 = row.insertCell(2); 
  25.             var element2 = document.createElement("input"); 
  26.             element2.type = "text"; 
  27.             cell3.appendChild(element2); 
  28.  
  29.         } 
  30.  
  31.         function deleteRow() { 
  32.             try { 
  33.             var table = document.getElementById('dataTable'); 
  34.             var rowCount = table.rows.length; 
  35.  
  36.             for(var i=0; i<rowCount; i++) { 
  37.                 var row = table.rows[i]; 
  38.                 var chkbox = table.rows[i].cells[0].childNodes[0]; 
  39.                 var soz = table.rows[i].cells[1]; 
  40.                 if(null != chkbox && true == chkbox.checked) { 
  41.                     //if(     
  42.                     table.deleteRow(i); 
  43.                     rowCount--; 
  44.                     i--; 
  45.  
  46.                     continue;
  47.                 } 
  48.  
  49.                 table.rows[i].cells[1].childNodes[0].nodeValue=i+1; 
  50.  
  51.             } 
  52.  
  53.  
  54.             }catch(e) { 
  55.                 alert(e); 
  56.             } 
  57.         } 
  58.  
  59.     </SCRIPT> 
  60. </HEAD> 
  61. <BODY> 
  62.  
  63.     <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
  64.  
  65.     <INPUT type="button" value="Delete Row" onclick="deleteRow()" /> 
  66.  
  67.     <TABLE id="dataTable" width="350px" border="1"> 
  68.         <TR> 
  69.             <TD><INPUT type="checkbox" name="chk"/></TD> 
  70.             <TD> 1 </TD> 
  71.             <TD> <INPUT type="text" /> </TD> 
  72.         </TR> 
  73.     </TABLE> 
  74.  
  75. </BODY> 
  76. </HTML>
Jan 16 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.