使用Javascript错误添加行_Javascript_Html Table

使用Javascript错误添加行

javascript

使用Javascript错误添加行,javascript,html-table,Javascript,Html Table,我试图创建一个程序，使用addrow按钮在HTML表中使用Javascript动态添加行。似乎有一个错误 <html> <head> <title>Home - First Website</title> <style> table{ width: 100%; } td{ padding: 8px; border: 1px solid; }

我试图创建一个程序，使用addrow按钮在HTML表中使用Javascript动态添加行。似乎有一个错误

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


家庭第一网站
桌子{
宽度：100%；
}
运输署{
填充：8px；
边框：1px实心；
}
输入[type=“text”]{
宽度：100%；
}
函数add（）{
var num=parseInt（document.getElementById（“t1”）.length+1）；
var a=document.createElement（“td”）；
var=document.createTextNode（num）；
a、 阳极；
文件.getElementById（“t1”）.appendChild（a）；
a=document.createElement（“td”）；
阳极=document.createElement（“输入”）；
var b=document.createAttribute（“类型”）；
b、 value=“复选框”；
阳极。setAttributeNode（b）；
a、 阳极；
文件.getElementById（“t1”）.appendChild（a）；
a=document.createElement（“td”）；
阳极=document.createElement（“输入”）；
b=document.createAttribute（“类型”）；
b、 value=“text”；
阳极。setAttributeNode（b）；
a、 阳极；
文件.getElementById（“t1”）.appendChild（a）；
}
1.

您使用的是

getElementById

，但您的表有名称而不是id

 <table name="t1">

到

错误出现在document.getElementById（“t1”）上，但您的表没有id=“t1”，而是有name=“ti”。最新情况：

<table id="t1">

代码中存在多个问题：

1）要添加行，请执行以下操作：

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

：请注意，您没有给您的表提供任何id

我想你需要数数你的行数。您可以通过以下方式获得：

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

2）要添加行，您尚未创建

元素

下面是更正后的JSFIDLE：

更新：更改了获取行数的方式

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>

1.

为什么对已经是整数的对象调用

parseInt

？

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