将表格转换为列表分组 3 行

Question

在 SharePoint 中，它有一个令人讨厌的习惯，那就是到处使用嵌套表。我想在其中之一上使用 jQuery 轮播，但它不适用于表格。所以我需要将表格转换为列表。这不是问题，因为我发现一些 jQuery 可以为我做到这一点。即：

var list = $("<ul/>");      
$('#tab1').find("tr").each(function() {         
    var p = $(this).children().map(function() {             
        return "<p>" + $(this).html() + "</p>";         
    });          
    list.append("<li>" + $.makeArray(p).join("") + "</li>");     
});      
$('#tab1').replaceWith(list); 

表结构如下：

<table id="test1">
    <tr><td>Help 1</td></tr>
    <tr><td>Me 1</td></tr>
    <tr><td>Please 1</td></tr>
    <tr><td>Help 2</td></tr>
    <tr><td>Me 2</td></tr>
    <tr><td>Please 2</td></tr>
    <tr><td>Help 3</td></tr>
    <tr><td>Me 3</td></tr>
    <tr><td>Please 3</td></tr>
</table>

上面的 jQuery 将每个 tr 转换为 li 项。但根据我的需要，我需要分成 3 行。所以输出应该是：

<ul id="test1">
    <li>
        <p class="p1">Help 1</p>
        <p class="p2">Me 1</p>
        <p class="p3">Please 1</p>
    </li>
    <li>
        <p class="p1">Help 2</p>
        <p class="p2">Me 2</p>
        <p class="p3">Please 2</p>
    </li>
    <li>
        <p class="p1">Help 3</p>
        <p class="p2">Me 3</p>
        <p class="p3">Please 3</p>
    </li>
</ul>

所以我需要向每一行添加一个类并将它们分成三组。所以我需要知道，使用上面的 jQuery 语句，是否可以使用计数器来迭代 children().map 函数中的列表？

Answer 1

尝试这个更明确的版本（fiddle）：

var list = $("<ul/>");      
var listitem = null;

// iterate over each cell (not each row)
$('#tab1').find("tr > td").each(function(i) {

    // starting with the first item, start a new listitem every three items
    // and append it to the ul
    if(i%3 == 0){
        listitem = $("<li/>");
        list.append(listitem);
    }

    // append the current item as a paragraph to the listitem
    var p = "<p>" + $(this).html() + "</p>";         
    listitem.append(p);

});      

// replace the table with the ul
$('#tab1').replaceWith(list); 

Answer 2

试试这个：

var target = $("#test1");
var results = [];
target.find("tr > td").each(function(i) {
    var obj = $(this);
    if(i%3 == 0) results.push("<li>");
    results.push("<p>");
    results.push(obj.html());
    results.push("</p>");
    if(i%3 == 2) results.push("</li>");
});
var results_in_html = results.join("");

看起来很乱，但我猜这是更多的运行时优化，请参阅：
http://www.learningjquery.com/2009/03 /43439-正确使用附加的原因

Answer 3

您可以使用 .slice() 对 < tr/>

var list = $("<ul/>");

while($("#test1 tr").length > 0)
{
    var td = $("#test1 tr").slice(0, 3).detach().find("td");
    var nowP = td.map(function(index, elm){
        return $("<p/>", {html:$(elm).text(), class:"p" + (index+1)}).get();
    });
    list.append($("<li/>").append(nowP));
}

$("#test1").replaceWith(list);

jsfiddle 上的示例