将表转换为列表分组3行 [英] Converting table to list grouping 3 rows

问题描述

在SharePoint中，每个地方都有使用嵌套表的恶习。我想在其中的一个上使用jQuery轮播，并且它不适用于表。所以我需要将表格转换为列表。这不是一个问题，因为我发现了一些jQuery会为我做。即：

  var list = $（< ul />）; 
 $（'＃tab1'）。find（tr）。each（function（）{
 var p = $（this）.children（）。map（function（）{
返回< p>+ $（this）.html（）+< / p>; 
}）; 
 list.append（< li>+ $。 makeArray（p）.join（）+< / li>）; 
}）; 
 $（'＃tab1'）。replaceWith（list）; 
  

表结构如下：

 < table id =test1> 
< tr>< td>帮助1< / td>< / tr> 
< tr>< td> Me 1< / td>< / tr> 
< tr>< td>请1< / td>< / tr> 
< tr>< td>帮助2< / td>< / tr> 
< tr>< td> Me 2< / td>< / tr> 
< tr>< td>请2< / td>< / tr> 
< tr>< td>帮助3< / td>< / tr> 
< tr>< td> Me 3< / td>< / tr> 
< tr>< td>请3< / td>< / tr> 
< / table> 
  

上面的jQuery将每个 tr 转换为 li 项目。但为了我的需要，我需要分成3排。所以输出结果应该是：

 < ul id =test1> 
< li> 
< p class =p1>帮助1< / p> 
< p class =p2> Me 1< / p> 
< p class =p3>请1< / p> 
< / li> 
< li> 
< p class =p1>帮助2< / p> 
< p class =p2> Me 2< / p> 
< p class =p3>请2< / p> 
< / li> 
< li> 
< p class =p1>帮助3< / p> 
< p class =p2> Me 3< / p> 
< p class =p3>请3< / p> 
< / li> 
< / ul> 
  

所以我需要为每行添加一个类，并将它们分成三份。因此，我需要知道，使用上面的jQuery语句，是否可以使用计数器遍历 children（）。map 函数中的列表？

解决方案

试试这个更明确的版本（小提琴）：

  var list = $（< ul />）; 
 var listitem = null; 
 
 //遍历每个单元格（不是每行）
 $（'＃tab1'）。find（tr> td）。each（function（i）{
 
 //从第一项开始，每三个项目开始一个新的listitem 
 //并将它附加到ul 
 if（i％3 == 0）{
 listitem = $（< li />）; 
 list.append（listitem）; 
} 
 
 //将当前项目作为段落追加到listitem 
 var p =< p>+ $（this）.html（）+< / p>; 
 listitem.append（p）; 
 
}）; 
 
 //将表替换为ul 
（'＃tab1'）。replaceWith（list）; 
  

In SharePoint it has a nasty habit of using nested tables everywhere. I want to use a jQuery carousel on one of them and it does not work with tables. So I need to convert a table to a list. This is not a problem as I found some jQuery that will do it for me. Namely:

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

The table structure is like:

<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>

The jQuery above converts each tr to a li item. But for my needs I need to group into 3 rows. So the output should be:

<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>

So I need to add a class to each row and group them in threes. So I need to know, using the jQuery statement above, if it is possible to use a counter to iterate through the list in the children().map function?

解决方案

Try this more explicit version (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); 

这篇关于将表转换为列表分组3行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！