首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将动态创建的元素tr发送到一个函数,并在其中获取td中输入的值

在前端开发中,可以通过动态创建元素tr并将其发送到一个函数中,然后在函数中获取td中输入的值。下面是一个示例代码:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <title>动态创建元素示例</title>
</head>
<body>
    <table id="myTable">
        <tr>
            <td><input type="text" id="input1"></td>
            <td><input type="text" id="input2"></td>
            <td><button onclick="sendRow()">发送</button></td>
        </tr>
    </table>

    <script>
        function sendRow() {
            var table = document.getElementById("myTable");
            var newRow = document.createElement("tr");
            var input1 = document.getElementById("input1").value;
            var input2 = document.getElementById("input2").value;

            var newCell1 = document.createElement("td");
            newCell1.innerHTML = input1;
            newRow.appendChild(newCell1);

            var newCell2 = document.createElement("td");
            newCell2.innerHTML = input2;
            newRow.appendChild(newCell2);

            table.appendChild(newRow);
        }
    </script>
</body>
</html>

在上述代码中,我们通过document.createElement方法动态创建了一个tr元素,并获取了两个输入框input1和input2中的值。然后,我们创建了两个新的td元素,并将输入框的值赋给它们的innerHTML属性。最后,将新创建的td元素添加到tr元素中,并将tr元素添加到表格中。

这样,当点击"发送"按钮时,会触发sendRow函数,动态创建一个包含输入框值的新行,并将其添加到表格中。

这个功能在表单提交、数据展示等场景中非常常见。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券