Question

我正在尝试实现动态表，但是当按下按钮添加行时，会添加行，但输入文本框不会插入到两个单元格中。不知道如何解决这个问题。

<html>
<body>
    <input type="button" value="Add Row" onclick="addRow('dataTable')" />
    <table id="dataTable" width="150px" border="1">
        <tr>
            <td height="27">
                1
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
        function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var firstCell = row.insertCell(0);
            firstCell.innerHTML = rowCount + 1;
            var secondCell = row.insertCell(1);
            var thirdCell = row.insertCell(2);
            var element = document.createElement("input");
            element.type = "text";
            element.name = "txtbox[]";
            secondCell.appendChild(element);

        }
    </script>

Answer 1

您尚未编写代码以向第三列添加新文本元素。在“secondCell.appendChild（element）;”之后添加下面提到的代码你的代码部分：

var element2 = document.createElement("input");

element2.type = "text";

element2.name = "txtbox2[]";

thirdCell.appendChild(element2);

Answer 2

您需要添加另一个“input”元素并将其附加到thirdCell。

尝试将javascript函数的最后一位更改为：

var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";

var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";

secondCell.appendChild(element1);
thirdCell.appendChild(element2);

Shown here

注意：您的script标记应该放在html的body内。

以下是最终代码的样子：

<html>
<body>
    <input type="button" value="Add Row" onclick="addRow('dataTable')" />
    <table id="dataTable" width="150px" border="1">
        <tr>
            <td height="27">
                1
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var firstCell = row.insertCell(0);
            firstCell.innerHTML = rowCount + 1;
            var secondCell = row.insertCell(1);
            var thirdCell = row.insertCell(2);

            var element1 = document.createElement("input");
            element1.type = "text";
            element1.name = "txtbox1[]";

            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "txtbox2[]";

            secondCell.appendChild(element1);
            thirdCell.appendChild(element2);
        }
    </script>
</body>
</html>

动态行和表

2 个答案: