3

这是我的 html 代码，在这个简单的代码中，通过按+按钮动态地增加输入的数量。现在我想在添加新输入后将allRows.length+1值存储到myHiddenField中，最后我可以看到我的 inouts html 输入值的总数，如下所示：

<input type="hidden" name="myHiddenField" value="**I want to store allRows.length+1 value here **" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
<script type="text/JavaScript"> 
function addRow(r){ 
var root = r.parentNode;//the root 
var allRows = root.getElementsByTagName('tr');//the rows' collection 
var cRow = allRows[0].cloneNode(true)//the clone of the 1st row 
var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row 
for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names) 
cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1)) 
} 
root.appendChild(cRow);//appends the cloned row as a new row 
} 

</script> 
</head> 
<body> 
<form action="" method="get"> 
  <table width="766"  border="0" cellspacing="0" cellpadding="0"> 
   <input type="hidden" name="myHiddenField" value="**I want to store allRows.length+1 value here **" />
    <tr> 
      <td width="191"><input type="text" name="textfield_A" /></td> 

      <td width="191"><input type="text" name="textfield_B" /></td> 

      <td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td> 
    </tr> 
  </table><br /><br /> 
  <input name="" type="submit" value="Submit" /> 
</form> 
</body> 
</html>

如何解决此问题并通过我的 html 表单将 javascript 值存储到输入值中？

4

6 回答 6

5

在隐藏输入和 Javascript 中添加一个id="myHiddenField"属性，您可以

document.getElementById("myHiddenField").value = allRows.length+1;

您显然不需要 jQuery 来为输入赋值。

于 2013-09-25T07:10:24.047 回答
3

检查我的jsfiddle。添加隐藏在您的 html 和 Javascript 中的输入类型，如下所示

在这里演示

document.getElementById("myHiddenField").value = allRows.length;
于 2013-09-25T07:20:39.587 回答
1

看到你可以使用 jquery 的属性选择器：

var $hiddenInput = $('input[name="myHiddenField"]'), 
    $rowLenth = $hiddenInput.closest('table tr').length+1;
$hiddenInput.val($rowLenth);
于 2013-09-25T07:22:17.803 回答
1

在addRow的末尾添加：

function addRow(r){ 
    // ...
    // ...
    // ...
    var hiddenInput = document.querySelector("input[name='myHiddenField']");
    hiddenInput.value = document.querySelectorAll("td input[type='text']").length + 1;
}
于 2013-09-25T07:15:03.727 回答
1

将您的代码更改为以下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
<script type="text/JavaScript"> 
function addRow(r){
    var currval = document.getElementById('myHiddenField').value;
    var root = r.parentNode;//the root 
    var allRows = root.getElementsByTagName('tr');//the rows' collection 
    var cRow = allRows[0].cloneNode(true)//the clone of the 1st row 
    var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row 
    for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names) 
        cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1)) 
    } 
    root.appendChild(cRow);//appends the cloned row as a new row
    document.getElementById('myHiddenField').value = ++currval;
} 

</script> 
</head> 
<body> 
<form action="" method="get"> 
  <table width="766"  border="0" cellspacing="0" cellpadding="0"> 
   <input type="hiddden" name="myHiddenField" id="myHiddenField" value="1" />
    <tr> 
      <td width="191"><input type="text" name="textfield_A" /></td> 

      <td width="191"><input type="text" name="textfield_B" /></td> 

      <td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td> 
    </tr> 
  </table><br /><br /> 
  <input name="" type="submit" value="Submit" /> 
</form> 
</body> 
</html>

我故意留下隐藏的类型来查看，以便可以查看更改，您可以稍后更正它。

于 2013-09-25T07:17:59.583 回答
1

尝试这个

<input type="hidden" name="myHiddenField" value="**I want to store allRows.length+1 value here **" id="numberOfRows" />

你的脚本应该是这样的

function addRow(r){ 
    var root = r.parentNode;//the root 
    var allRows = root.getElementsByTagName('tr');//the rows' collection 
    var cRow = allRows[0].cloneNode(true)//the clone of the 1st row 
    var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row 
    for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names) 
        cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1)) 
    } 
    root.appendChild(cRow);//appends the cloned row as a new row 

    $('#numberOfRows').val($('table tr').length+1);
}
于 2013-09-25T07:09:54.827 回答