Question

我一直在尝试使用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>&nbsp;</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);
});

加上上面的许多其他版本。任何人都可以帮我解决这个问题吗？希望这不是太模糊。

Answer 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 :)

Answer 2

怎么样：

$(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);

更新nextSibling元素

2 个答案: