Question

你好，我正在尝试遵循 Add/Delete table rows dynamically using JavaScript

我的目标是扫描/输入将构成HTML表格的条形码。 “用户”，“站”将是一个变量。 “容器”将被输入一次并保存。唯一更改的项目将是scan，它是新行。我已经添加了行，但是无法将变量添加到它们各自的列中。对此的任何指导都是很棒的！

这是我的HTML表单

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

这是表格：

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

下面是Java语言

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

查看代码段，运行它，看看是否适合您。显然，您可以/应该根据您的（特定）需求进行调整，但是您的表可以添加行，输入数据，根据需要删除正确的行，还可以“提交”数据。

// 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>

使用JavaScript添加/删除表格行

1 个答案: