addRowToTable

**Nicodemas** · May 3 '12, 11:48 AM

Unless you plan to target those new elements, you do not need to apply IDs. If I have misunderstood your needs, please define them more explicitly.

**IndyNS** · May 3 '12, 11:24 PM

Basically I want to have multiple tables each with their own add button(which adds a row with the 2 text boxes and drop down) that only adds to that specific table.

**Nicodemas** · May 4 '12, 01:07 AM

In that case, you need to add an argument to your function defintion.

So, instead of this:

Code:

function addRowToTable(){
  var tbl = document.getElementById('Division');
  ... rest of the function ...
}

You should use this:

Code:

function addRowToTable(whichTable){
  var tbl = document.getElementById(whichTable);
  ... rest of the function ...
}

And the button should have the the ID of the target table in the event. So....

Code:

<button type="button" onclick="addRowToTable('table-1')">Add row</button>

<button type="button" onclick="addRowToTable('table-2')">Add row</button>

Make sense?

Code:

<!doctype html>
<html>
<head>
<script type="text/javascript">
function addRowToTable(whichTable){
  var tbl = document.getElementById(whichTable);
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
//  var iteration = lastRow + 1;
  var row = tbl.insertRow(lastRow);

  //  cell 0
  var cell0 = row.insertCell(0);
  var el = document.createElement('input');
  el.type = 'text';
  el.NAME = 'Resource[]';
  el.size = 30;
  cell0.appendChild(el);


  //cell 1
  var cell1 = row.insertCell(1);
  var el = document.createElement("select");
  cell1.innerHTML
    + '<option value="0">Avaliable</option>'
    + '<option value="1">Busy</option>'

  //cell 2
  var cell2 = row.insertCell(2);
  var el = document.createElement('input');
  el.type = 'text';
  el.NAME = 'Comment[]';
  el.size = 25;
  cell2.appendChild(el);

}
</script>
</head>
<body>
<table id="Division1">
	<tr><td>Thing1</td><td>Thing2</td></tr>
	<tr><td><button type="button" onclick="addRowToTable('Division1')">Add Row</button></td><td></td></tr>
</table>

<table id="Division2">
	<tr><td>Thing1</td><td>Thing2</td></tr>
	<tr><td><button type="button" onclick="addRowToTable('Division2')">Add Row</button></td><td></td></tr>
</table></body>
</html>

**IndyNS** · May 4 '12, 01:24 AM

Awesome I will give it a try! Thank you for helping the newbie!