Adding Extra Rows in a html table

unistake · October 21, 2009

Hi all,

I am having trouble trying to edit a bit of javascript. Basically, I would like to be able to click an 'add button' that would add an extra row of form fields to the table.

I was hoping someone could highlight the parts of the script I need to edit - in order to create more columns but still has the same functions as this script. ( I would like about 15 columns!)

Also, is there a way to simply add a row with the same values as the above row just for convenience? - maybe to reduce the amount of code that would need adding?

Thanks for the help. the code I have is....

<head>
<script type="text/javascript" language="javascript">
// Last updated 2006-02-21
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">
<table border="1" id="tblSample">
  <tr>
    <th colspan="3">Sample table</th>
  </tr>
  <tr>
    <td>1</td>
    <td><input name="txtRow1" type="text"
     id="txtRow1" onKeyPress="keyPressTest(event, this);" value="default value" size="40" /></td>
    <td>
    <select name="selRow0">
    <option value="value0">text zero</option>
    <option value="value1" selected>text one</option>
    </select>
    </td>
  </tr>
</table>
<p><input type="button" value="Add another" onClick="addRowToTable();" />
  </p>
<p>
  <input type="button" value="Remove Last Row" onClick="removeRowFromTable();" />
  <input type="button" value="Add Logbook" onClick="validateRow(this.form);" />
</p>
</form>
</body>

unistake · October 22, 2009

any ideas?

unistake · October 24, 2009

anyone?

Sign In

Adding Extra Rows in a html table

Recommended Posts

unistake

Link to comment

Share on other sites

unistake

Link to comment

Share on other sites

unistake

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information