Insert row in table with auto increment Javascript

Question

I have a problem insert row with button Javascript. When I press the button rows insert unexpectedly as following images. Also I need delete row button similarly works. Thanks for all response.

table image

my codes

    <style>
    table {
        border-collapse: collapse;
        margin: 100px;
    }

    table, td, th {
        border: 1px solid black;
        padding: 10px;
    }
</style>

    table id="t1">
    <tr>
        <th>Task No</th>
        <th>Done/In Progress</th>
        <th>Deadline</th>
        <th>Task</th>
    </tr>

    <tr>
        <td>1.</td>
        <td>
            <input type="checkbox" />
        </td>
        <td></td>
        <td>
            <input type="text" style="width:100%;" />
        </td>
    </tr>
</table>

    <input style="margin-top:-200px; padding:10px" type="button" value="Add Row" onclick="add()" />

java script:

 <script>
    function add() {
        var num = document.getElementById("t1").rows.length;
        console.log(num);
        var x = document.createElement("tr");

        var a = document.createElement("td");
        var anode = document.createTextNode(num);
        a.appendChild(anode);
        x.appendChild(a);

        a = document.createElement("td");
        anode = document.createElement("input");
        var b = document.createAttribute("type");
        b.value = "checkbox";
        anode.setAttributeNode(b);
        a.appendChild(anode);
        x.appendChild(a);

        a = document.createElement("td");
        anode = document.createElement("input");
        b = document.createAttribute("type");
        b.value = "text";
        anode.setAttributeNode(b);
        a.appendChild(anode);
        x.appendChild(a);
        document.getElementById("t1").appendChild(x);
    }
</script>

use a counter variable, whats the problem?

WaqasRaza
– WaqasRaza

2015-12-18 11:11:14 +00:00
Commented Dec 18, 2015 at 11:11 — WaqasRaza
– WaqasRaza, Commented Dec 18, 2015 at 11:11
javascript function does not works as requested .

user5616382
– user5616382

2015-12-18 11:13:32 +00:00
Commented Dec 18, 2015 at 11:13 — user5616382
– user5616382, Commented Dec 18, 2015 at 11:13

isambitd · Accepted Answer · 2015-12-18 11:37:11Z

Are you asking for this thing? Can you please try this one. ->try jsbin link

function add() {
    var num = document.getElementById("t1").rows.length;
    console.log(num);
    var x = document.createElement("tr");

    var a = document.createElement("td");
    var anode = document.createTextNode(num+'.');
    a.appendChild(anode);
    x.appendChild(a);

    a = document.createElement("td");
    anode = document.createElement("input");
    var b = document.createAttribute("type");
    b.value = "checkbox";
    anode.setAttributeNode(b);
    a.appendChild(anode);
    x.appendChild(a);
  
    a = document.createElement("td");
    x.appendChild(a);

    a = document.createElement("td");
    anode = document.createElement("input");
    b = document.createAttribute("type");
    b.value = "text";
    anode.setAttributeNode(b);
    a.appendChild(anode);
    x.appendChild(a);
    
    a = document.createElement("td");
    anode = document.createElement('input');
    anode.setAttribute('type','button');
    anode.setAttribute('value','Delete Row');
  anode.setAttribute('onclick','deleteRow(this)');
    a.appendChild(anode);
    x.appendChild(a);
    document.getElementById("t1").appendChild(x);
}

function deleteRow(e,v) {
  var tr = e.parentElement.parentElement;
  var tbl = e.parentElement.parentElement.parentElement;
  tbl.removeChild(tr);

}

table {
    border-collapse: collapse;
    margin: 100px;
}

table, td, th {
    border: 1px solid black;
    padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <table id="t1">
<tr>
    <th>Task No</th>
    <th>Done/In Progress</th>
    <th>Deadline</th>
    <th>Task</th>
    <th><input style="margin-top:-200px; padding:10px" type="button" value="Add Row" onclick="add()" /></th>
</tr>

<tr>
    <td>1.</td>
    <td>
        <input type="checkbox" />
    </td>
    <td></td>
    <td>
        <input type="text" />
    </td>
  <td> <input type="button" value="Delete Row" onclick="deleteRow(this)" /></td>
    
</tr>
  </table>


</body>
</html>

Collectives™ on Stack Overflow

Insert row in table with auto increment Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related