Adding Row using Javascript Error

Question

I was trying to create a program to add rows dynamically using Javascript in HTML Table using the Add Row Button. There seems to be an error.

<html>
<head>
    <title>Home - First Website</title>
    <style>
    table{
        width: 100%;
    }
    td{
        padding: 8px;
        border: 1px solid;
    }
    input[type="text"]{
        width: 100%;
    }
    </style>
    <script type="text/javascript">
    function add(){
        var num=parseInt(document.getElementById("t1").length+1);
        var a=document.createElement("td");
        var anode=document.createTextNode(num);
        a.appendChild(anode);
        document.getElementById("t1").appendChild(a);

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

        a=document.createElement("td");
        anode=document.createElement("input");
        b=document.createAttribute("type");
        b.value="text";
        anode.setAttributeNode(b);
        a.appendChild(anode);
        document.getElementById("t1").appendChild(a);
    }
    </script>
</head>
<body>
    <table name="t1">
        <tr>
            <input type="button" value="Add Row" onclick="add()">
        </tr>
        <tr>
            <td>1.</td><td><input type="checkbox"></td><td><input type="text" style="width:100%;"></td>
        </tr>
    </table>
</body>
</html>

Why are you calling parseInt on something that's already an integer? — Barmar
– Barmar, Commented Jul 29, 2014 at 20:04

hityagi · Accepted Answer · 2014-07-29 20:21:38Z

There are multiple problems in the code :

1) for adding row why are you doing this :

var num=parseInt(document.getElementById("t1").length+1);

: please note you haven't given your table any id.

I think you need count to number your rows. You can get that by :

var num =document.getElementById("t1").rows.length;

2) For adding a row, you have not created <tr> element!

Here's the corrected jsFiddle : http://jsfiddle.net/thecbuilder/kCm2D/1/

update : changed the way to get number of rows.

js

function add() {
     var num = 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);
 }

html

<table id="t1" name="t1"> <!-- "t1" is id as well -->
    <tr>
        <input type="button" value="Add Row" onclick="add()" />
    </tr>
    <tr>
        <td>1.</td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="text" style="width:100%;" />
        </td>
    </tr>
</table>

Amin Eshaq · Accepted Answer · 2014-07-29 20:04:16Z

0

You're using getElementById but your table has a name not an id.

 <table name="t1">

to

<table id="t1">

answered Jul 29, 2014 at 20:04

Amin Eshaq

4,0241 gold badge19 silver badges21 bronze badges

Comments

BA TabNabber · Accepted Answer · 2014-07-29 20:06:12Z

0

The error is on document.getElementById("t1"), but your table doesn't have an id="t1", it has a name="ti". Update to this:

<table id="t1">

answered Jul 29, 2014 at 20:06

BA TabNabber

1,3562 gold badges14 silver badges19 bronze badges

Collectives™ on Stack Overflow

Adding Row using Javascript Error

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related