7

我需要一些帮助来弄清楚如何编写一些 jQuery 代码。

我需要在点击时动态克隆一个表。但是我每次都需要更改表格及其子元素的 ID。由于该表可以有很多孩子，因此手动执行此操作会很困难。我需要一种方法来更改所有子（所有后代）元素的 id。我总是将计数器添加到 id 中。（我知道孩子们只会访问直系孩子，但我只是想尝试一下是否可行）。如果你们知道如何在 jQuery 或 Javascript 中完成此操作，请告诉我。

<table id="table"> 
    <tr id = "tr" > 
        <td id="td"> 
            <span id="span" value="hiii">hi</span> 
        </td> 
    </tr>
</table> 

<button>Clone</button> 

<script> 
    $("button").click(function () { 
        var table = $("#table").clone(true,true) 
        table.attr( 'id', function() { return this.id +"1"; })    
        alert($("#table1").children()) 
        $("#table1").find(*).attr('id', function() { return this.id +"1"; }) 
        table.appendTo("#table") 
        alert(document.getElementById("tr1")) 
        alert(document.getElementById("span1").value) 
    }); 
</script>
4

3 回答 3

8

如果elem是您的克隆结构的父级并且cntr是您说要维护的计数器，您可以像这样修复该克隆结构中的所有 id：

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id + cntr;
    })
}

如果 id 的末尾可能已经有一个克隆的数字，并且您想替换该数字，则可以这样做：

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id.replace(/\d+$/, "") + cntr;
    })
}

因此，根据您现在添加到问题中的代码，您可以这样做：

<script> 
    var cloneCntr = 1;
    $("button").click(function () { 
        var table = $("#table").clone(true,true) 
        fixIds(table, cloneCntr);
        table.insertAfter("#table") 
        cloneCntr++;
    });
</script>

工作示例：http: //jsfiddle.net/jfriend00/wFu9K/

注意：我还将 DOM 插入代码更改为insertAfter()，因为您不能按照您的方式将一个表附加到另一个表（一个表将在现有表之后或在前一个表中的单元格内）。

如果您只是想添加一行，那么您需要克隆该行，而不是整个表。

您可以使用以下代码将克隆行添加到现有表中：

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id.replace(/\d+$/, "") + cntr;
    })
}
var cloneCntr = 1;
$("button").click(function () { 
    var row = $("#table tr").first().clone(true,true);
    fixIds(row, cloneCntr++);
    row.appendTo("#table") 
}); ​
于 2012-09-14T14:24:22.123 回答
0 
$("#table1").find(*)

应该

table.find("*")

$("#table1")由于您尚未将表添加到 DOM，因此不会在该代码行上返回任何内容。And*是一个选择器，应该是一个字符串。

于 2012-09-14T14:23:18.997 回答
0

你可以做

$Element.children().each(function () {
        this.id = new_id;
 });
于 2016-10-20T19:30:01.637 回答