[RESOLVED] HTML table add row/Adding new row to a table

Thikho

I am doing a simple admin section for adding, updating and deleting parcels , but i need do do it ina table which will always add up new rows to add the information of the parcel.

I have managed to get a good script to add new rows to my table my problem is how do i add them to the database while its adding more rows i am confuse here pls help , I want to be able to add more rows and when i add them they must be stored om database.

my db structure

my addparcel,htm file

<html><head><TITLE>Add Row 2</TITLE>

<script>

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 invoice
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 10;

  el.onkeypress = keyPressTest;
  cellRight.appendChild(el);

// select order #
  var cellRight1 = row.insertCell(2);
  var el1 = document.createElement('input');
  el1.type = 'text';
  el1.name = 'txtRow' + iteration;
  el1.id = 'txtRow' + iteration;
  el1.size = 10;

  el1.onkeypress = keyPressTest;
  cellRight1.appendChild(el1)

// select bag #
  var cellRight2 = row.insertCell(3);
  var el2 = document.createElement('input');
  el2.type = 'text';
  el2.name = 'txtRow' + iteration;
  el2.id = 'txtRow' + iteration;
  el2.size = 10;

  el2.onkeypress = keyPressTest;
  cellRight2.appendChild(el2)

// select length
  var cellRight3 = row.insertCell(4);
  var el3 = document.createElement('input');
  el3.type = 'text';
  el3.name = 'txtRow' + iteration;
  el3.id = 'txtRow' + iteration;
  el3.size = 10;

  el3.onkeypress = keyPressTest;
  cellRight3.appendChild(el3)

// select width
  var cellRight4 = row.insertCell(5);
  var el4 = document.createElement('input');
  el4.type = 'text';
  el4.name = 'txtRow' + iteration;
  el4.id = 'txtRow' + iteration;
  el4.size = 10;

  el4.onkeypress = keyPressTest;
  cellRight4.appendChild(el4)

// select height
  var cellRight5 = row.insertCell(6);
  var el5 = document.createElement('input');
  el5.type = 'text';
  el5.name = 'txtRow' + iteration;
  el5.id = 'txtRow' + iteration;
  el5.size = 10;

  el5.onkeypress = keyPressTest;
  cellRight5.appendChild(el5)


// select weight
  var cellRight6 = row.insertCell(7);
  var el6 = document.createElement('input');
  el6.type = 'text';
  el6.name = 'txtRow' + iteration;
  el6.id = 'txtRow' + iteration;
  el6.size = 10;

  el6.onkeypress = keyPressTest;
  cellRight6.appendChild(el6)


}
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';60

  // 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="parceladdrow_new.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 class="tableHeading">Row</th>
	<th class="tableHeading">Invoice Number</th>
	<th class="tableHeading">Order Number</th>
	<th class="tableHeading">Bag Number</th>
	<th class="tableHeading">Length</th>
	<th class="tableHeading">Width</th>
	<th class="tableHeading">Height</th>
	<th class="tableHeading">Weight</th>
  </tr>
  <tr>
    <td>1</td>
    	<td><input type="text" name="txtRow1" id="txtRow1" size="9" onkeypress="keyPressTest(event, this);" /></td>
	<td><input type="text" name="txtRow2" id="txtRow2" size="9" onkeypress="keyPressTest(event, this);" /></td>
	<td><input type="text" name="txtRow3" id="txtRow3" size="5" onkeypress="keyPressTest(event, this);" /></td>
	<td><input type="text" name="txtRow4" id="txtRow4" size="5" onkeypress="keyPressTest(event, this);" /></td>
	<td><input type="text" name="txtRow5" id="txtRow5" size="5" onkeypress="keyPressTest(event, this);" /></td>
	<td><input type="text" name="txtRow6" id="txtRow6" size="5" onkeypress="keyPressTest(event, this);" /></td>
	<td><input type="text" name="txtRow7" id="txtRow7" size="5" onkeypress="keyPressTest(event, this);" /></td>
  </tr>

</table>
</form>
</body>
</html>

peytonrm

I'm not entirely clear on what you're trying to do but it seems you need AJAX to do it. Using AJAX, you can trigger a call within your addRowToTable function to a script that saves the new data row to the database. There are tons of tutorials on AJAX, just google it.