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

Dženis H. · Accepted Answer · 2018-10-13 01:00:04Z

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>

Hello Bigga_HD thanks for the help thus far, I'm still new to Javascript, my question is, if we are rapidly scanning in values (i.e. entering for the form input), how do we pass them to this built HTML table? For instance, we have two saved session variables userName and Station. UserName= "TestUser" goes into column "One" and Station "Station1" into column 2. Then the actual entered value from the form entered be passed and go into column 3?

Collectives™ on Stack Overflow

Add/Delete table rows using JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related