时间戳

首页 > 解决方案 > 带有html表的Javascript onClick函数包括FORM

javascript - 带有html表的Javascript onClick函数包括FORM

问题描述

我需要在表格的单元格中添加输入表单。
它易于使用table，但我对将 Javascript 与table.

有什么提示或帮助吗？

下面是我的代码：

<a onClick="newRow()" class="btn btn-primary text-light">Add New</a>

<script>

function newRow(){
var table = document.getElementById("tb_deviceDetail");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "PLACE FOR INPUT FORM";
cell2.innerHTML = "PLACE FOR INPUT FORM";   
}

</script>

输入表单代码是：input type="text" name="input01"，但是这个输入表单需要用 PHP POST 到任何页面。所以它需要一个form method="post" action="#"before input。但是对于 JAVASCRIPT，我无法实现我的想法。

onClick 函数用于添加name="xxx" 的输入表单

注意：我是一名初级程序员......请帮助我！

标签： javascripthtml-table

解决方案

我认为你需要这样的东西，我在点击时动态生成输入并使用计数器变量分配其名称（name1，name2，name3 ...）。

并使用 HTML 表单正常发布。

let counter = 0;

    function newRow()
    {
    var table = document.getElementById("tb_deviceDetail");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = `<input type="text" name="input${++counter}">`;
    cell2.innerHTML = `<input type="text" name="input${++counter}">`;   
    }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    
    <a onClick="newRow()" class="btn btn-primary text-light">Add New</a>

    <form action="#" method="POST" >

        <table id="tb_deviceDetail">
        </table>

        <input type="submit" name="submit">

    </form>

    <script src="main.js"></script>
</body>
</html>

推荐阅读