SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to change the row id according after deleting dynamically

    Hi,

    In my page i have to add rows dynamically and remove rows dynamically. I have one checkbox and three text boxes for each row which is added dynamically.

    Adding and deleting rows works fine. I have problem after deleting. This is due to unchange of id value for checkbox and textboxes.

    I assigned the id value in array and incremented while adding and decremented while removing. But the the id and values of the textboxes is not exact. How to fix this?

    Regards,
    Viji.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give us a link to your test page and we'll take a look.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my code:

    If i add two rows dynamically and delete the first row, after deleting the checkbox and textboxes id should be changed accordingly.

    Code:
    <script language = "Javascript" type="text/javascript">
    function AddRows()
    {
      var tableId = document.getElementById('filtertable');
      var count = document.getElementById('rowCnt').value;
      var noOfRows = tableId.rows.length;
      var ptrRef = noOfRows;
    		
      var tableRow = tableId.insertRow(noOfRows);	
      count++;			
     
      // Checkbox
      var chkBoxCell = tableRow.insertCell(0);
      var chkBoxColElem = document.createElement('input');
      chkBoxColElem.type = 'checkbox';
      chkBoxColElem.name = 'chkbox[]';
      chkBoxColElem.id = 'chkbox' + ptrRef;
      chkBoxCell.appendChild(chkBoxColElem);
    			
      //Emp Name text box		
      var secondCell = tableRow.insertCell(2);
      var secondColElem = document.createElement('input');
       secondColElem.type = 'text';
       secondColElem.name = 'empName[]';
       secondColElem.id = 'empName' + ptrRef;	
       secondCell.appendChild(secondColElem);
    			
       //Emp designation text box
       var thirdCell = tableRow.insertCell(3);
       var thirdColElem = document.createElement('input');
       thirdColElem.type = 'text';
       thirdColElem.name = 'empDesgn[]';
       thirdColElem.id = 'empDesgn' + ptrRef;	
       thirdCell.appendChild(thirdColElem);	
    }
    function RemoveRows()
    {
      var tableId = document.getElementById('filtertable');
      var count = document.getElementById('rowCnt').value;
      var noOfRows = tableId.rows.length;
      if(count > 1)
      {
      for(i=1;i<count;i++)
      {
        itemCheck="chkbox"+i; 
        if(document.getElementById(itemCheck)!=undefined) 
        {						                             
        if(document.getElementById(itemCheck).checked==true) { 
          tableId.deleteRow(i);
          count--;
       }
     }
     }
    }  else   {
        tableId.deleteRow(noOfRows - 1);
        count--;
    }
    document.getElementById('rowCnt').value = count;	
    }
    </script>
    
    <form name="dynamicRows" method="post" action="<?php echo $PHP_SELF; ?>"  Autocomplete="off">
    <table id="dynamicTable">
    <tr>
     <td><input type="checkbox" name="chkbox[]" id="chkbox1"></td>	
     <td><input type="textbox" name="empName[]" id="empName1"></td>
    <td><input type="textbox" name="empDesgn[]" id="empDesgn1"></td>
    </tr>
    <tr>
     <td><input type="button" value="Addrow()"></td>
     <td><input type="button" value="RemoveRow()"></td>
    </tr>
    </table>
    </form>
    After deleting deleting first row my second row's checkbox id should be changed to "chkbox1" and thired row's checkbox id should be changed to "chkbox2".

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type='text/javascript'>
    function AddRow()
    {
      var tableId = document.getElementById('dynamicTable');
      var count = parseInt(document.getElementById('rowCnt').value);
      var noOfRows = tableId.rows.length;
      var ptrRef = noOfRows;
    		
      var tableRow = tableId.insertRow(noOfRows);	
      count++;			
      document.getElementById('rowCnt').value = count;	
     
      // Checkbox
      var chkBoxCell = tableRow.insertCell(0);
      var chkBoxColElem = document.createElement('input');
      chkBoxColElem.type = 'checkbox';
      chkBoxColElem.name = 'chkbox[]';
      chkBoxColElem.id = 'chkbox' + ptrRef;
      chkBoxCell.appendChild(chkBoxColElem);
    			
      //Emp Name text box		
      var secondCell = tableRow.insertCell(1);
      var secondColElem = document.createElement('input');
       secondColElem.type = 'text';
       secondColElem.name = 'empName[]';
       secondColElem.id = 'empName' + ptrRef;	
       secondCell.appendChild(secondColElem);
    			
       //Emp designation text box
       var thirdCell = tableRow.insertCell(2);
       var thirdColElem = document.createElement('input');
       thirdColElem.type = 'text';
       thirdColElem.name = 'empDesgn[]';
       thirdColElem.id = 'empDesgn' + ptrRef;	
       thirdCell.appendChild(thirdColElem);	
    
    }
    function RemoveRow()
    {
      var i, n, cb, en, ed, len, tbl;
    
      var count = parseInt(document.getElementById('rowCnt').value);
      tbl = document.getElementById('dynamicTable');
      len = tbl.rows.length;
      n = 0; // assumes ID numbers start at zero
      for (i = 0; i < len; i++) {
        cb = document.getElementById("chkbox" + i);
        en = document.getElementById("empName" + i);
        ed = document.getElementById("empDesgn" + i);
        if (cb && en && ed) {
          if (cb.checked) { 
            tbl.deleteRow(n);
            count--;
          }
          else {
            cb.id = "chkbox" + n;
            en.id = "empName" + n;
            ed.id = "empDesgn" + n;
            ++n;
          }
        }
      }
      document.getElementById('rowCnt').value = count;	
    }
    </script>
    </head>
    <body>
    
    <form name="dynamicRows" method="post" action="" Autocomplete="off">
    <table id="dynamicTable">
    <tr>
     <td><input type="checkbox" name="chkbox[]" id="chkbox0"></td>	
     <td><input type="textbox" name="empName[]" id="empName0"></td>
    <td><input type="textbox" name="empDesgn[]" id="empDesgn0" value='0'></td>
    </tr>
    <tr>
     <td><input type="checkbox" name="chkbox[]" id="chkbox1"></td>	
     <td><input type="textbox" name="empName[]" id="empName1"></td>
    <td><input type="textbox" name="empDesgn[]" id="empDesgn1" value='1'></td>
    </tr>
    <tr>
     <td><input type="checkbox" name="chkbox[]" id="chkbox2"></td>	
     <td><input type="textbox" name="empName[]" id="empName2"></td>
    <td><input type="textbox" name="empDesgn[]" id="empDesgn2" value='2'></td>
    </tr>
    </table>
    <input type="button" value='Add Row' onclick="AddRow()">
    <input type="button" value='Remove Row' onclick="RemoveRow()">
    <input type='text' id='rowCnt' value='3'>
    </form>	
    
    </body>
    </html>

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •