I have produced some code which adds a table row on a button click, which can be seen below. However, I would like the new row to be added at the bottom of the table instead of the top. How can this be achieved?
function addRow()
{
//add a row to the rows collection and get a reference to the newly added row
var newRow = document.all("lines").insertRow();
//add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
var oCell = newRow.insertCell();
oCell.innerHTML = "<input type='button' value='Remove' onclick='removeRow(this);'/>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='quantity'>"
oCell = newRow.insertCell();
oCell.innerHTML = "<select type='text' name='product'>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='barcode'>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='checkbox' name='chk'>";
}