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.


Recommended Answers

All 12 Replies

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...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some Title</titles>
<script type="text/javascript">
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;
<table id="table1" border="1">
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
<br />
<input type="button" onclick="addRow()" value="Add Row" />
<input type="button" onclick="removeRow(this)" value="Del Row" />


very thanks
but delete not run

try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function addRowToTable()
  var tbl = document.getElementById('tblSample');
  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);
  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  // right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;
  el.onkeypress = keyPressTest;
  // select cell
  var cellRightSel = row.insertCell(2);
  var sel = document.createElement('select');
  sel.name = 'selRow' + iteration;
  sel.options[0] = new Option('text zero', 'value0');
  sel.options[1] = new Option('text one', 'value1');
function keyPressTest(e, obj)
  var validateChkb = document.getElementById('chkValidateOnKeyPress');
  if (validateChkb.checked) {
    var displayObj = document.getElementById('spanOutput');
    var key;
    if(window.event) {
      key = window.event.keyCode; 
    else if(e.which) {
      key = e.which;
    var objId;
    if (obj != null) {
      objId = obj.id;
    } else {
      objId = this.id;
    displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
function removeRowFromTable()
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
function openInNewWindow(frm)
  // open a blank window
  var aWindow = window.open('', 'TableAddRowNewWindow',
  // set the target to the blank window
  frm.target = 'TableAddRowNewWindow';
  // submit
function validateRow(frm)
  var chkb = document.getElementById('chkValidate');
  if (chkb.checked) {
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length - 1;
    var i;
    for (i=1; i<=lastRow; i++) {
      var aRow = document.getElementById('txtRow' + i);
      if (aRow.value.length <= 0) {
        alert('Row ' + i + ' is empty');



<form action="tableaddrow_nw.html" method="get">
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="button" value="Submit" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit
<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
<table border="1" id="tblSample">
    <th colspan="3">Sample table</th>
    <td><input type="text" name="txtRow1"
     id="txtRow1" size="40" onkeypress="keyPressTest(event, this);" /></td>
    <select name="selRow0">
    <option value="value0">text zero</option>
    <option value="value1">text one</option>


how can i make it please? Because I'm new in this Community

Only the original poster can mark it solved, and since this was tacked on to the end of a two year old thread, I doubt that person is going to mark it solved for someone else.

see bottom of the page "mark as solved". click that link

Re-read my post. He cannot mark solved a thread that he hijacked - only the original author can mark it.

Is it possible to create an ID for each row, and manipulate that?

Thanks for yuo

thank you for the solution..:)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.