0

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'>";  
   }
2
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by nelliott10
0

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'>";  
   }
var tbl = document.getElementById('tabId');
	var lastRow = tbl.rows.length;
	var tr = tbl.insertRow(lastRow);  
	var td = tr.insertCell(-1);
	td.setAttribute('align','center');
	td.innerHTML = 'your content';
0

I know have the above code working however, I am sure how to get values into the select element, I wondering if it could be linked to the static table row which is coded using html

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.