Add/delete Table Rows Using Javascript

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' wil

Solution 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.functioncreateTable() {
        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 TABLEfunctionaddRow() {
        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.functionremoveRow(oButton) {
        var empTab = document.getElementById('empTable');
        empTab.deleteRow(oButton.parentNode.parentNode.rowIndex);       // BUTTON -> TD -> TR.
    }
    
    
    // EXTRACT AND SUBMIT TABLE DATA.functionsumbit() {
        var myTab = document.getElementById('empTable');
        var values = newArray();
    
        // 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: 2px3px;
            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;
}

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