469,344 Members | 5,418 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,344 developers. It's quick & easy.

how to dynamically delete a row

10
Hi,
i am dyanamically creating rows.In which I have two columns. First column contains text box while second one contains a button. On click of this button I want to delete that row.
The problem is my code I always deletes the first row.
below is the code snipet:
Expand|Select|Wrap|Line Numbers
  1. function apendValues()
  2.  {
  3.      listAttrValues=true ;
  4.   var tbl = document.getElementById('tblAttrValues');
  5.   var lastRow = tbl.rows.length;
  6.   // if there's no header row in the table, then iteration = lastRow + 1
  7.   var iteration = lastRow;
  8.   var row = tbl.insertRow(lastRow);
  9.    row.id='row'+iteration;
  10.     var val = document.getElementById('newAttrVal').value;
  11.   // left cell
  12.   var cellLeft = row.insertCell(0);
  13.    var el = document.createElement('input');
  14.     el.type = 'text';
  15.     el.id = 'attrRow' + iteration;
  16.     el.size = 20;
  17.     el.name='attrCol';
  18.   //  el.readonly ='readonly';
  19.     el.setAttribute('readonly','readonly');
  20.     el.value=val;
  21.  
  22.   cellLeft.appendChild(el);
  23.  
  24.   // right cell
  25.   var cellRight = row.insertCell(1);
  26.   var e2 = document.createElement('input');
  27.   e2.type = 'button';
  28.   e2.name = 'deleteRow';
  29.   e2.value = '-';
  30.   e2.onclick=deleteSelectedRow;
  31.  
  32.   e2.id = 'txtRow' + iteration;
  33.    cellRight.appendChild(e2);
  34.  
  35.        //Clear text box
  36.        document.getElementById("newAttrVal").value = "";
  37.  
  38.   }
  39.  
  40.  function deleteSelectedRow()
  41.  {
  42.     document.getElementById("tblAttrValues").deleteRow(this); 
  43.      var cols=document.getElementsByName('attrCol');
  44.       for(var i = 0; i < cols.length; i++){
  45.        cols[i].id='attrRow' + i;
  46.          }
  47.    }
  48.  
Please help.
Jan 28 '09 #1
5 1460
hariomt
10
I have got the solution.
Jan 28 '09 #2
acoder
16,027 Expert Mod 8TB
Good to hear, but could you also post the solution, so that it can help other members/visitors coming across this thread.
Jan 28 '09 #3
hariomt
10
Expand|Select|Wrap|Line Numbers
  1. function deleteSelectedRow()
  2.  {
  3.       var tbl= document.getElementById("tblAttrValues")
  4.       tbl.deleteRow(this.parentNode.parentNode.rowIndex); 
  5. }
Jan 28 '09 #4
acoder
16,027 Expert Mod 8TB
Thanks for posting your solution. Just remember to use [code] tags though.
Jan 28 '09 #5
hariomt
10
I am sorry, I did not get you.
What do you mean by [code] tags?
could you please explain.
Jan 28 '09 #6

Post your reply

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

Similar topics

1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.