AJAX

Add / remove table row. javascript

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Mar 2007

Posts: 9

Reputation: thenamenoonehas is an unknown quantity at this point

Solved Threads: 0

thenamenoonehas thenamenoonehas is offline

Offline

Newbie Poster

Add / remove table row. javascript

Aug 31st, 2008

Hi everyone,

Im looking for a simple function to add / remove a table row for my website. I have searched high and low for a script that does it... but no dice...

can anyone shoot me a link or post a snippet of code that would enable me to create an additional table row.

cheers

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Add / remove table row. javascript

Sep 1st, 2008

Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some Title</titles>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some Title</titles>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
<!-- BEGIN HIDING
function addRow()
{ /* A quick example on how to add and delete table rows. Enjoy coding! */ 
 
  var _table = document.getElementById('table1').insertRow(0);
  var cell0 = _table.insertCell(0);
  var cell1 = _table.insertCell(1);
  cell0.innerHTML = 'New Cell1';
  cell1.innerHTML = 'New Cell2';
}
function removeRow(rows)
{ var _row = rows.parentElement.parentElement;
  document.getElementById('table1').deleteRow(_row.rowIndex);
}
// DONE HIDING -->
</script>
<script type="text/javascript">
<!-- BEGIN HIDING
function addRow()
{ /* A quick example on how to add and delete table rows. Enjoy coding! */ 

  var _table = document.getElementById('table1').insertRow(0);
  var cell0 = _table.insertCell(0);
  var cell1 = _table.insertCell(1);
  cell0.innerHTML = 'New Cell1';
  cell1.innerHTML = 'New Cell2';
}
function removeRow(rows)
{ var _row = rows.parentElement.parentElement;
  document.getElementById('table1').deleteRow(_row.rowIndex);
}
// DONE HIDING -->
</script>

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
</head>
<body>
<table id="table1" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="addRow()" value="Add Row" />
<input type="button" onclick="removeRow(this)" value="Del Row" />
 
</body>
</html>
</head>
<body>
<table id="table1" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="addRow()" value="Add Row" />
<input type="button" onclick="removeRow(this)" value="Del Row" />

</body>
</html>