我一直在尝试使用JQuery。我有以下功能:
<script type="text/javascript">
$(function(){
// start a counter for new row IDs
// by setting it to the number
// of existing rows
var newRowNum = 2;
// bind a click event to the "Add" link
$('#addnew').click(function(){
// increment the counter
newRowNum += 1;
// get the entire "Add" row --
// "this" refers to the clicked element
// and "parent" moves the selection up
// to the parent node in the DOM
var addRow = $(this).parent().parent();
// copy the entire row from the DOM
// with "clone"
var newRow = addRow.clone();
// set the values of the inputs
// in the "Add" row to empty strings
//$('input', addRow).val('');
//$('name', addRow).val('os' + newRowNum);
// replace the HTML for the "Add" link
// with the new row number
$('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + '" value="Email Address ' + (newRowNum - 1) + '">Recipient');
// insert a remove link in the last cell
$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
// loop through the inputs in the new row
// and update the ID and name attributes
$('td:first-child.next-child.input', newRow).each(function(i){
var newID = newRowNum;
$(this).attr('id','os' + newID).attr('name','os' + newID);
});
//$('td:first-child.next', newRow).html('<input type="text" id="os' + newRowNum + '" name="os' + newRowNum + '" value="">');
// insert the new row into the table
// "before" the Add row
addRow.before(newRow);
// add the remove function to the new row
$('a.remove', newRow).click(function(){
$(this).parent().parent().remove();
return false;
});
// prevent the default click
return false;
});
});
</script>
在html中,我有这个(更大的代码块的一部分):
<tr>
<td><input type="hidden" name="on2" value="Email Address 1"><a id="addnew" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" /></td>
<td> </td>
</tr>
这里应该发生的是,当点击添加链接时,添加更改为带有隐藏表单元素的单词Recipient,其中name =“on + newRowNum”(对于添加的每个新行,增加1)和id相同。这很好用。但是,接下来的第二部分,我需要更新文本输入的名称和id以匹配newRowNum,在这种情况下name =“os + newRowNum”等。我无法实现这一点。我很可能没有使用正确的表单来访问它。我尝试了以下所有方法:
$('td:first-child.next-child.input', newRow).each(function(i){
var newID = newRowNum;
$(this).attr('id','os' + newID).attr('name','os' + newID);
});
$('td:firstChild.nextSibling.input', newRow).each(function(i){
var newID = newRowNum;
$(this).attr('id','os' + newID).attr('name','os' + newID);
});
加上上面的许多其他版本。任何人都可以帮我解决这个问题吗?希望这不是太模糊。
答案 0 :(得分:1)
这个选择器$('td:first-child.next-child.input', newRow)
有点不对劲。如果我们需要做的就是获取我们可以做的行中的输入
$('input:hidden', newRow).attr('id','on' + newRowNum ).attr('name','on' + newRowNum );
$('input:text', newRow).attr('id','os' + newRowNum ).attr('name','os' + newRowNum );
这是 Working Demo 。如果您想查看代码,请将 / edit 添加到网址。
顺便说一句 - 在我重新阅读你的问题之前,我认为你的意思是something like this :)
答案 1 :(得分:0)
怎么样:
$(newRow:input:last).each(function(i){
var newID = newRowNum;
var newOID = 'os' + newID;
$(this).attr('id',newOID ).attr('name',newOID);
});
注意:我没有在attr上测试回调,因此您可能需要:
$(this).attr('id',newOID);
$(this).attr('name',newOID);
而不是
$(this).attr('id',newOID ).attr('name',newOID);