how to dynamically delete a row

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • hariomt
    New Member
    • Jan 2009
    • 10

    how to dynamically delete a row

    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:
    Code:
    function apendValues()
     {
         listAttrValues=true ;
      var tbl = document.getElementById('tblAttrValues');
      var lastRow = tbl.rows.length;
      // if there's no header row in the table, then iteration = lastRow + 1
      var iteration = lastRow;
      var row = tbl.insertRow(lastRow);
       row.id='row'+iteration;
        var val = document.getElementById('newAttrVal').value;
      // left cell
      var cellLeft = row.insertCell(0);
       var el = document.createElement('input');
        el.type = 'text';
        el.id = 'attrRow' + iteration;
        el.size = 20;
        el.name='attrCol';
      //  el.readonly ='readonly';
        el.setAttribute('readonly','readonly');
        el.value=val;
      
      cellLeft.appendChild(el);
      
      // right cell
      var cellRight = row.insertCell(1);
      var e2 = document.createElement('input');
      e2.type = 'button';
      e2.name = 'deleteRow';
      e2.value = '-';
      e2.onclick=deleteSelectedRow;
      
      e2.id = 'txtRow' + iteration;
       cellRight.appendChild(e2);
      
           //Clear text box
           document.getElementById("newAttrVal").value = "";
    
      }
      
     function deleteSelectedRow()
     {
        document.getElementById("tblAttrValues").deleteRow(this); 
         var cols=document.getElementsByName('attrCol');
          for(var i = 0; i < cols.length; i++){
    	   cols[i].id='attrRow' + i;
             }
       }
    Please help.
    Last edited by pbmods; Jan 28 '09, 04:47 AM. Reason: Added CODE tags.
  • hariomt
    New Member
    • Jan 2009
    • 10

    #2
    I have got the solution.

    Comment

    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032

      #3
      Good to hear, but could you also post the solution, so that it can help other members/visitors coming across this thread.

      Comment

      • hariomt
        New Member
        • Jan 2009
        • 10

        #4
        Code:
        function deleteSelectedRow()
         {
              var tbl= document.getElementById("tblAttrValues")
              tbl.deleteRow(this.parentNode.parentNode.rowIndex); 
        }
        Last edited by acoder; Jan 28 '09, 11:15 AM. Reason: Added [code] tags

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032

          #5
          Thanks for posting your solution. Just remember to use [code] tags though.

          Comment

          • hariomt
            New Member
            • Jan 2009
            • 10

            #6
            I am sorry, I did not get you.
            What do you mean by [code] tags?
            could you please explain.
            Last edited by Dormilich; Jan 28 '09, 01:27 PM. Reason: explanation sent by PM

            Comment

            Working...