View Single Post
Old 09-25-2012, 11:05 PM   PM User | #1
nick2price
Regular Coder

 
Join Date: May 2009
Posts: 105
Thanks: 47
Thanked 1 Time in 1 Post
nick2price is an unknown quantity at this point
Adding/removing table rows

Hi guys. A posted a similar question before, but I have come across a different issue now. Basically, I have a table with some rows
Code:
<table class="table1">
  <tr>
    <td class="title">1:</td>
    <td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
    <td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
    <td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
  </tr>

  <tr>
    <td class="title">2:</td>
    <td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
    <td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
    <td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
  </tr>
</table>
Further down the table I have two buttons which will add/remove more rows. The rows which are added contain the exact same td's as the default rows.
Code:
var stdContent = "<td class='title'>xx:</td>\n" +
    "<td><input type='text' placeholder='Giving' class='selector' name='givingxx' autocomplete='off'/></td>\n" +
    "<td><input type='text' placeholder='Getting' class='selector' name='gettingxx' autocomplete='off'/></td>\n" +
    "<td><input type='text' name='popupdatexx' id='popupdatexx' class='popupdate' value='When' /></td>\n";
var newno = 3;
function addTableRow() {
    var newrow = document.createElement('tr');
    // give your table an id..
    var theTable = document.getElementById('table1');
    
    theTable.appendChild(newrow);
    var newcontent = stdContent.replace('xx', newno);
    newrow.innerHTML = newcontent;
    newno++;
}
To remove a row, I basically do
Code:
var rws;
function deleteTableRow(obj){
 obj=document.getElementById(obj);
 rws=obj.getElementsByTagName('tr');
 obj.removeChild(rws[rws.length-1]);
 newno--;
}
My first question is why will the remove rows function only remove dynamically added rows. By this, I mean I can only delete rows which have been added, and I cannot delete rows which are created in my original table.

Secondly, if I am using the same class for the datepicker, why wont they work with dynamically added rows?

Any information appreciated.

Cheers
nick2price is offline   Reply With Quote