Question

我在使用按钮Javascript插入行时出现问题。当我按下按钮行时意外插入如下图像。另外我需要删除行按钮同样有效。感谢您的回复。

我的代码

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

Answer 1

你要求这件事吗？你能试试这个吗？ - ＆GT; 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>

使用自动增量Javascript

1 个答案: