Add / remove table row. javascript

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

thenamenoonehas

Newbie Poster

9 posts since Mar 2007

Reputation Points: 10

Solved Threads: 0

3 Years Ago

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"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some Title</titles>

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

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

<input type="button" onclick="addRow()" value="Add Row" />
<input type="button" onclick="removeRow(this)" value="Del Row" />

</body>
</html>

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

1 Year Ago

very thanks
but delete not run

tarekwarak

Newbie Poster

5 posts since Aug 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

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">
<head>
<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);
  cellLeft.appendChild(textNode);
  
  // 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;
  cellRight.appendChild(el);
  
  // 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');
  cellRightSel.appendChild(sel);
}
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',
   'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
   
  // set the target to the blank window
  frm.target = 'TableAddRowNewWindow';
  
  // submit
  frm.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');
        return;
      }
    }
  }
  openInNewWindow(frm);
}

</script>
</head>

<body>

<form action="tableaddrow_nw.html" method="get">
<p>
<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
</p>
<p>
<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
</p>
<table border="1" id="tblSample">
  <tr>
    <th colspan="3">Sample table</th>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="text" name="txtRow1"
     id="txtRow1" size="40" onkeypress="keyPressTest(event, this);" /></td>
    <td>
    <select name="selRow0">
    <option value="value0">text zero</option>
    <option value="value1">text one</option>
    </select>
    </td>
  </tr>
</table>
</form>

</body>
</html>

muralikalpana

Posting Pro

540 posts since Sep 2009

Reputation Points: 21

Solved Threads: 36

1 Year Ago

tarekwarak

Newbie Poster

5 posts since Aug 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

put mark as solved thread

muralikalpana

Posting Pro

540 posts since Sep 2009

Reputation Points: 21

Solved Threads: 36

1 Year Ago

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

tarekwarak

Newbie Poster

5 posts since Aug 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

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.

Ezzaral

Posting Genius

Moderator

15,986 posts since May 2007

Reputation Points: 3,250

Solved Threads: 847

1 Year Ago

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

muralikalpana

Posting Pro

540 posts since Sep 2009

Reputation Points: 21