单击按钮将tr元素附加到tbody元素

Question

我正在尝试创建按钮事件侦听器，该按钮事件侦听器会将<tr>元素的内容添加到<tbody>元素中。香港专业教育学院尝试了多种方法，例如insertRow()和adjacentHtml()，但似乎没有一个可行。我究竟做错了什么？我也在使用打字稿，这可能也是问题吗？

html

<table class="table table-striped table-dark invoice-table">
                <thead>
                    <tr class="head-contents">
                        <th scope="col">#</th>
                        <th scope="col-3">Description</th>
                        <th scope="col">Quanity</th>
                        <th scope="col">item number</th>
                        <th scope="col">item price</th>
                        <th scope="col">total price</th>
                    </tr>
                </thead>
                <tbody id="table-contents">
                    <tr id="item-info">
                        <th scope="row">1</th>
                        <td><input type="text"></td>
                        <td><input type="number"></td>
                        <td><input type="number"></td>
                        <td><input type="number"></td>
                        <td><span></span></td>
                    </tr>
                </tbody>
            </table>

  <!-- add item button -->
        <button type="button" class="btn btn-primary" id="addItem">Add Item</button>

  <!-- delete item button -->
        <button type="button" class="btn btn-warning" id="deleteItem">Delete Item</button>

javascript

// event listener to add an item
let addedItem = document.getElementById("addItem").addEventListener("click", () => {
    let table = document.getElementById("invoice-table");
    let row = document.getElementById("item-info");
});;

Answer 1

<table class="table table-striped table-dark invoice-table">
                <thead>
                    <tr class="head-contents">
                        <th scope="col">#</th>
                        <th scope="col-3">Description</th>
                        <th scope="col">Quanity</th>
                        <th scope="col">item number</th>
                        <th scope="col">item price</th>
                        <th scope="col">total price</th>
                    </tr>
                </thead>
                <tbody id="table-contents">
                    <tr id="item-info">
                        <th scope="row">1</th>
                        <td><input type="text"></td>
                        <td><input type="number"></td>
                        <td><input type="number"></td>
                        <td><input type="number"></td>
                        <td><span></span></td>
                    </tr>
                </tbody>
</table>
<button id="addItem">Add Item</button>
<script>
  document.getElementById('addItem').addEventListener('click', () => {
  let body = document.getElementById("table-contents");
    let row = document.getElementById("item-info");
    var para = document.createElement("tr")
    para.innerHTML = `
           <th scope="row">1</th>
           <td><input type="text"></td>
           <td><input type="number"></td>
           <td><input type="number"></td>
           <td><input type="number"></td>
           <td><span></span></td>
    `;            
    body.appendChild(para);
  })

</script>

Answer 2

，您需要创建一个模板，然后在每次单击按钮时将其附加到模板上。

let addedItem = document.getElementById("addItem").addEventListener("click", () => {
    let item = document.getElementById("table-contents");

    item.insertAdjacentHTML('beforeend', "<tr id='item-info'> <th scope='row'>1</th> <td><input type='text'></td> <td><input type='number'></td> <td><input type='number'></td> <td><input type='number'></td> <td><span></span></td></tr>");

});;

不要忘记HTML中的按钮：

<button id="addItem">Add New Row</button>

这对我有用，如果您还有其他问题，请告诉我。

Answer 3

查看代码段。这段代码对我有用。根据您实际想要归档的内容，您可以/应根据需要进行调整。就像添加一个实际上每行递增的id一样，并增加一个功能来计算您的 Total 列。
但是由于答案中未包含该信息，因此我将由您自己决定：）

// 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');

                // 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(values);

    }

table 
        {
            width: 70%;
            font: 17px Calibri;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
            color: green;
        }

<body onload="createTable()">
        <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>