javascript - 使用计算javascript动态添加表格行

Question

我的 HTML 看起来像这样

<table>
    <tr>
        <td>Input 1</td>
        <td>Input 2</td>
        <td>Total</td>
        <td>&nbsp;</td>
        </tr>
            <tr>
        <td><input></td>
        <td><input></td>
        <td><input disabled></td>
        <td><button value="add">Add</button></td>
        </tr>
        <tr>
        <td>&nbsp;</td>
        <td>Grand Total</td>
        <td><input disabled ></td>
        <td>&nbsp;</td>
        </tr>
    </table>

我正在尝试在两个输入之间进行计算，然后可以使用 javascrtpt 添加新行...请帮助我..

Answer 1

您可以通过两种方式为您的表格提供 id，访问您的表格对象，然后通过 table.innerhtnl+= 您的新行标签添加新行。或者也以这种方式

function addRow(tableID) {
        inp1 = document.getElementByID(input1).value;
        inp2 = document.getElementByID(input2).value;
        if(your Logic to check inputs)
        {
        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount + 1;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        cell3.appendChild(element2);
        }
    }

演示访问这里