用javascript动态添加输入字段，这些字段的参数名称是什么？答案

【问题标题】：Dynamically added input fields with javascript, what are these fields' param names?用javascript动态添加输入字段，这些字段的参数名称是什么？
【发布时间】：2023-04-08 16:01:02
【问题描述】：

我正在使用我在互联网上找到的以下示例来动态构建输入字段列表。

它似乎工作正常，但是当我提交表单时，我使用参数名称来放置来自 HttpServletRequest 的数据吗？

谢谢，罗伯

<HTML> 

<HEAD>     
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>     

<SCRIPT language="javascript">         

function addRow(tableID) {               
    var table = document.getElementById(tableID);               
    var rowCount = table.rows.length;             
    var row = table.insertRow(rowCount);               
    var cell1 = row.insertCell(0);             
    var element1 = document.createElement("input");             
    element1.type = "checkbox";             
    cell1.appendChild(element1);               
    var cell2 = row.insertCell(1);             
    cell2.innerHTML = rowCount + 1;               
    var cell3 = row.insertCell(2);             
    var element2 = document.createElement("input");             
    element2.type = "text";             
    cell3.appendChild(element2);           
}           

function deleteRow(tableID) {             
    try {             
        var table = document.getElementById(tableID);             
        var rowCount = table.rows.length;               
        for(var i=0; i<rowCount; i++) {                 
            var row = table.rows[i];                 
            var chkbox = row.cells[0].childNodes[0];                 
            if(null != chkbox && true == chkbox.checked) {                     
                table.deleteRow(i);                     
                rowCount--;                     
                i--;                 
            }               
        }             
        }catch(e) {                 
            alert(e);             
        }         
    }       
</SCRIPT> 
</HEAD> 

<BODY>

<form name="myform" action="myServlet" method="post">

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />       
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />       
    <TABLE id="dataTable" width="350px" border="1">         
    <TR>             
        <TD><INPUT type="checkbox" name="chk"/></TD>             
        <TD> 1 </TD>             
        <TD> 
            <INPUT type="text" /> 
        </TD>         
    </TR>     
    </TABLE>   

     <input type="submit" value="Go!"/>

</form>

</BODY> 
</HTML>

【问题讨论】：

标签： java javascript html servlets

【解决方案1】：

您需要为输入对象提供“名称”属性（如果您的 JSP 不使用名称，则为“id”，但我相信名称是首选）

试试这个：

function addRow(tableID) {               
    var table = document.getElementById(tableID);               
    var rowCount = table.rows.length;             
    var row = table.insertRow(rowCount);               
    var cell1 = row.insertCell(0);             
    var element1 = document.createElement("input");             
    element1.type = "checkbox";             
    element1.name = "chk_input";      //*** EDIT ***            
    cell1.appendChild(element1);               
    var cell2 = row.insertCell(1);             
    cell2.innerHTML = rowCount + 1;               
    var cell3 = row.insertCell(2);             
    var element2 = document.createElement("input");             
    element2.type = "text";
    element2.name = "text_input";     //*** EDIT ***
    cell3.appendChild(element2);           
}

然后你的参数将被命名为“text_input”和“chk_input”。你当然可以用更有意义的东西来代替它。

我有一段时间没有使用 JSP（我假设这就是 HttpServletRequest 的意义所在……）所以我不记得如何访问它们，但这些将是关键。

编辑：如果您要动态添加行，我想您需要一个唯一的名称。看来您正在跟踪行数，因此您可以执行以下操作：

 ...
 element2.name = 'text-input-' + rowCount;
 ...

然后在您的控制器中（无论处理表单），您都可以使用 rowCount 设置一个循环（对于 i .. rowcount），您可以在其中检查每一行的“text-input-”+ CastToString(i) 等键在表格中。

如果您没有将 rowCount 与表单一起传递，只需添加一个隐藏类型的输入，该输入带有 name='rowCount' 和 rowCount var 的值。您可以在用户单击提交按钮时执行此操作，这样您就不必在每一行都更新它）

form = document.getElementById('myform');
rc = document.createElement('input');
rc.type = 'hidden'
rc.value = rowCount; // make sure it's in scope!!!
form.appendChild(rc);

【讨论】：

谢谢，但我可以多次单击“添加”按钮。每个输入都需要一个唯一的名称吗？你会建议我如何处理这个问题？
@Robert Hume 查看编辑 :) 我在第一次回答后就意识到了这一点
另外我应该补充一下，我编了 CastToString——我只是想指出，如果它不是字符串，你必须强制转换它——有一段时间没有使用 Java
非常好。还有一个问题，使用您的代码 - 如果我添加行 (1,2,3)，然后删除中间行 (1,3)，然后添加另一行 (1,3,3)，我会得到一个副本，对？有没有办法解决这个问题，我应该使用随机的六位数字还是其他东西而不是行数？
是的，生成一个随机数（或使用某种形式的时间戳）可能是要走的路。然后我猜你只是迭代所有的键......但如果行号不在那里，那么你将不知道它属于哪一行......也许像“text-{rownumber}-{random}”和“chk-{rownumber}-{random}”