如何在 html 表中为未知数量的输入命名？

Posted 2023-05-09

【中文标题】如何在 html 表中为未知数量的输入命名？

【英文标题】：How can I give name for unknown number of inputs in html table?

【发布时间】：2019-12-23 19:53:36

【问题描述】：

我有一个由表格组成的表格，可以根据用户需要增加输入（行），所以我使用了 jquery 和 javascript 函数，我将它们命名如下：name="projectname[]" 这样名称将在一个数组中，但是当我稍后运行该页面并向表中添加行以填充我的信息时，我意识到该数组不起作用，因为我的单选按钮受其他行的影响我的意思是如果我有两行那么只有一个可以检查..所以他们有相同的名字！那我该怎么办？ this is what I meant only one is checked

     function myfunction(x)
        var row = x.closest("tr");
        $("<tr><td></td> <td><input name='mainm[]'/> </td><td><input 
         type='radio' name='mainmfts[]' value='Y'> Yes<input type='radio' 
         name='mainmfts[]' value='N'> No</td> </tr>").insertAfter(row);

        $("#myform").on("click","TheSelectorForTheIcon",function()
        var row = x.closest("tr");
        $("<tr>…</tr>").insertAfter(row);


        )               

    

【问题讨论】：

我们没有足够的详细信息来帮助您。如果您稍后使用先前提交的 daya 加载页面，那么您确切地知道通过循环技术创建多少个字段/行。帮不了你，还没有。我不知道建议更深的数组结构是否会有所帮助。例如。 mainmfts[i][] 使用 javascript 将行计数保持为 i。

你没有得到我的问题吗？或者您需要更多代码？

是的，有点不清楚。您能否展示一下现在正在发生的事情，以及您想要实现的目标？您在页面加载之间有一个持久数组，但没有持久表单？

我可能理解，但我无法重现该问题。我们需要更多代码——minimal reproducible example

【参考方案1】：

您应该为每一行使用不同的名称。您可以为第一个出现的输入设置名称，如projectname[0]。当您进行克隆时，您可以计算现有行并相应地更改名称。请参考以下代码：

var replaceAll = function(string, replacingItem, replaceWith) 
     return string.toString().replace(new RegExp(replacingItem, 'g'), replaceWith);
;

function myfunction(x)

    /* Below code will work for first appearnace */
    var row = x.closest("tr");
    $("<tr><td></td> <td><input name='mainm[0]'/></td><td><input 
        type='radio' name='mainmfts[0]' value='Y'> Yes<input type='radio' 
        name='mainmfts[0]' value='N'> No</td> </tr>").insertAfter(row);
    /* End Code */

    $("#myform").on("click","TheSelectorForTheIcon",function()
        var row = x.closest("tr");
        var cloneData = "<tr><td></td> <td><input name='mainm[$key]'/> </td><td><input 
          type='radio' name='mainmfts[$key]' value='Y'> Yes<input type='radio' 
          name='mainmfts[$key]' value='N'> No</td> </tr>";

        var existingRowCount =  x.closest("tr").length;
        var updatedCloneString = replaceAll(cloneData, '$key', existingRowCount);
        $(updatedCloneString).insertAfter(row);
    )               
 

希望对您有所帮助。您需要确保每个 input 应该有不同的名称。

【讨论】：

当我读到这正是问题所在：确保每个输入都有其唯一的名称。

不能粘贴代码，直接尝试执行。这只是实现所需输出的一种方法。尝试调试您的代码或制作小提琴，以便我可以进一步帮助您:)

你能解释一下var replaceAll中'g'的用途吗？

replace 仅适用于第一次出现，因此它只会替换第一次出现的$key。因此，我们需要使用正则表达式将所有$key 替换为计数器。

替换对我不起作用：/我不知道是什么问题

【参考方案2】：

经过这么多尝试，我找到了最简单的解决方案

        /*to get the table and the length of it (#rows)*/
         var table2 = document.getElementById("tblmain");
         var RowCount= table2.rows.length; 
         var row = x.closest("tr"); /*to insert the row after the current row */

之后我将 rowCount 设为数组的索引

$("<tr> <td><input name='mainm["+RowCount+"]'/> </td> ).insertAfter(row);
   $("#myform").on("click","TheSelectorForTheIcon",function()
        var rows = x.closest("tr");
         $("<tr>…</tr>").insertAfter(row); 

       ) 

有关更多信息，请查看随问题发布的代码