jQuery是一款功能強(qiáng)大的JavaScript庫(kù)，可以用它來(lái)實(shí)現(xiàn)很多網(wǎng)頁(yè)開發(fā)中的功能。其中，表格嵌套是在網(wǎng)頁(yè)開發(fā)過(guò)程中經(jīng)常會(huì)用到的一個(gè)功能，使用jQuery可以簡(jiǎn)單實(shí)現(xiàn)表格嵌套。下面我們就來(lái)看看如何使用jQuery實(shí)現(xiàn)表格嵌套。

$('tr.has-children').each(function(){
var row = $(this);
var children = row.nextUntil('tr:not(.child)');
var html = '';
children.each(function(){
var child = $(this).addClass('child');
html += '' + child.html() + '';
});
row.after(html);
});

以上代碼中，$('tr.has-children').each(function())是用來(lái)循環(huán)每一個(gè)擁有子行的表格行的。var row = $(this);將每一行通過(guò)jQuery變量存儲(chǔ)。在循環(huán)過(guò)程中，將該行之后的所有子行通過(guò)nextUntil方法存儲(chǔ)，var children = row.nextUntil('tr:not(.child)');其中，'tr:not(.child)'是排除子行的標(biāo)志。

在接下來(lái)的操作中，將每一個(gè)子行封裝到一個(gè)html變量中，并附加到該行之后。var html = '';開頭初始化為空字符串，var child = $(this).addClass('child');將子行全都附加上child的class以便在CSS中定制樣式，html += '' + child.html() + '';將子行存儲(chǔ)到html變量中。

最后，使用row.after(html);將每一行之后的子行都附加上，就完成了表格嵌套的操作。這個(gè)例子就是通過(guò)jQuery的each和nextUntil方法實(shí)現(xiàn)表格嵌套的。