Add/Delete table rows using JavaScript

Question

Hello I'm trying to follow this Add/Delete table rows dynamically using JavaScript

My goal is to scan/enter in barcodes that will make an HTML table. The "user", the "station" will be a variable. The "container" will be entered in once and saved. The only changing item will be scan which is the new row. I've gotten it to add the row but I can't add the variables into their respective columns. Any guidance on this would be great!

Here is my HTML FORM

<form id="trackForm" 
    autocomplete='off'>
    <div class="row">
        <div class="col col-lg">
            <div id="s1group" class="input-group mb-2">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <b>CONTAINER: </b>
                    </div>
                </div>
                <input id="container" class="form-control" 
                    type="text" 
                    placeholder="Scan container." 
                    onpropertychange="checkScanInput();">
                </input>
                <div class="invalid-feedback">
                    This field cannot be empty!
                </div>
            </div>
            <div id="s2group" class="input-group">
                <div class="input-group-prepend">
                    <div id="s2label" class="input-group-text font-weight-bold">
                        SCAN: 
                    </div>
                </div>
                <input id="scan" class="form-control" 
                    type="text" 
                    placeholder="Scan entry or code." 
                    onpropertychange="checkScanInput();">
                </input>
                <div class="invalid-feedback">
                    This field cannot be empty!
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-2">
        <button id="trackSubmit" class="btn btn-dark font-weight-bold" 
            type="submit" 
            style="background-color: #005997; display:none;">
        </button>
    </div>
</form>

This is the table:

<table id="resultTable" class="table display compact">
    <thead>
        <tr>
            <th>User</th>
            <th>Station</th>
            <th>Scan</th>
            <th>Container</th>
            <th>Date/Time</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Below is the Javascript

var thisStation = stationList[ssv][1];
    var sessionUser = document.getElementById('userDisplay').textContent;


    var table = document.getElementById("resultTable");
    var rowCount = table.rows.length;
    var colCount = table.rows[0].cells.length;

    var row = table.insertRow(rowCount);
    for(var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }

    row = table.insertRow(table.rows.length);
    for(var i = 0; i < colCount; i++) {

        var newcell = row.insertCell(i);
        if(i == (colCount - 1)) {
            newcell.innerHTML = "<INPUT type=\"button\" value=\"Delete Row\" onclick=\"removeRow(this)\"/>";
        } else {
            newcell.innerHTML = table.rows[3].cells[i].innerHTML;
        }
    }

Answer 1

Check out the code snippet, run it and see if this works for you. Obviously, you can/ should adjust it to your (specific) needs, but you have your table with the ability to add rows, input data, remove correct rows as you please, and also the ability to "submit" your data.

 // ARRAY FOR HEADER. const arrHead = ['#', 'One', 'Two', 'Three']; // SIMPLY ADD OR REMOVE VALUES IN THE ARRAY FOR TABLE HEADERS. // FIRST CREATE A TABLE STRUCTURE BY ADDING A FEW HEADERS AND // ADD THE TABLE TO YOUR WEB PAGE. function createTable() { var empTable = document.createElement('table'); empTable.setAttribute('id', 'empTable'); // SET THE TABLE ID. var tr = empTable.insertRow(-1); for (var h = 0; h < arrHead.length; h++) { var th = document.createElement('th'); // TABLE HEADER. th.innerHTML = arrHead[h]; tr.appendChild(th); } var div = document.getElementById('cont'); div.appendChild(empTable); // ADD THE TABLE TO YOUR WEB PAGE. } // ADD A NEW ROW TO THE TABLE function addRow() { var empTab = document.getElementById('empTable'); var rowCnt = empTab.rows.length; // GET TABLE ROW COUNT. var tr = empTab.insertRow(rowCnt); // TABLE ROW. tr = empTab.insertRow(rowCnt); for (var c = 0; c < arrHead.length; c++) { var td = document.createElement('td'); // TABLE DEFINITION. td = tr.insertCell(c); if (c == 0) { // FIRST COLUMN. // ADD A BUTTON. var button = document.createElement('input'); // SET INPUT ATTRIBUTE. button.setAttribute('type', 'button'); button.setAttribute('value', 'Remove'); button.setAttribute('id', 'rm'); // ADD THE BUTTON's 'onclick' EVENT. button.setAttribute('onclick', 'removeRow(this)'); td.appendChild(button); } else { // CREATE AND ADD TEXTBOX IN EACH CELL. var ele = document.createElement('input'); ele.setAttribute('type', 'text'); ele.setAttribute('value', ''); td.appendChild(ele); } } } // DELETE TABLE ROW. function removeRow(oButton) { var empTab = document.getElementById('empTable'); empTab.deleteRow(oButton.parentNode.parentNode.rowIndex); // BUTTON -> TD -> TR. } // EXTRACT AND SUBMIT TABLE DATA. function sumbit() { var myTab = document.getElementById('empTable'); var values = new Array(); // LOOP THROUGH EACH ROW OF THE TABLE. for (row = 1; row < myTab.rows.length - 1; row++) { for (c = 0; c < myTab.rows[row].cells.length; c++) { // EACH CELL IN A ROW. var element = myTab.rows.item(row).cells[c]; if (element.childNodes[0].getAttribute('type') == 'text') { values.push(element.childNodes[0].value); } } } console.log('Data send:\\n' + values); } 

 table { width: 70%; font: 17px Calibri; } table, th, td { border: solid 1px #DDD; border-collapse: collapse; padding: 2px 3px; text-align: center; color: grey; } #addRow { color: green; font-weight: bold; } #bt { color: blue; font-style: italic; font-weight: bold; } #rm { color: red; font-weight: bold; } 

 <body onload="createTable()"> <p> <input type="button" id="addRow" value="Add New Row" onclick="addRow()" /> </p> <!--THE CONTAINER WHERE WE'll ADD THE DYNAMIC TABLE--> <div id="cont"></div> <p> <input type="button" id="bt" value="Sumbit Data" onclick="sumbit()" /> </p> </body>