將錶轉換爲列表分組3行

在SharePoint中，每個地方都有使用嵌套表的惡習。我想在其中的一個上使用jQuery輪播，並且它不適用於表。所以我需要將表格轉換爲列表。這不是一個問題，因爲我發現了一些jQuery會爲我做。即：將錶轉換爲列表分組3行

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函數中的列表？

來源

2011-05-20 anothershrubery

試試這個更明確的版本（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);

來源

2011-05-20 16:15:56

這正是我需要的，我適應它，因爲是我需要照顧的每一行中的一些表格單元格，但是這工作得很好。 – anothershrubery 2011-05-23 10:16:48

試試這個：

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-reasons-to-use-append-correctly

來源

2011-05-20 16:28:09 Yman

您可以使用.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);

Example on jsfiddle

來源

2011-05-20 16:46:30

將錶轉換爲列表分組3行

回答

相關問題