CODEWITHSUNDEEP
javascript
Syazri Aris
Syazri Aris

Reputation: 53

Dynamically add table row with calculation javascript

my HTML look like this

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

i`m trying to calculate between two input and can add new row after that using javascrtpt... pls help me..

Upvotes: 0

Views: 1869

Answers (1)

Neji
Neji

Reputation: 6839

you can do it in two ways give id to your table, access your table object then add a new row by table.innerhtnl+= your new rows tags. or also in this way

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

for demo visit here

Upvotes: 1

Related Questions