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>

私は2つの入力の間で計算しようとしていますが、その後javascrtptを使用して新しい行を追加できます...plsは私を助けます。

Answer 1

これは、テーブルにidを指定し、テーブルオブジェクトにアクセスしてから、table.innerhtnl+=新しい行タグで新しい行を追加する2つの方法で実行できます。またはこのように

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

デモについてはこちらをご覧ください