創建使用jQuery rowspans

我將數據追加從JSON對象到表：創建使用jQuery rowspans

var array1 = $.map(data, function (field, i) 
{ 
    return '<tr><td>' + field.date + '</td><td>' + field.art + '</td><td class="san' + field.art +'">' + field.text + '</td></tr>'; 
}); 

$('#TableBody').append(array1.join(''));

enter image description here

其實這個作品非常好，我得到這樣的輸出：

<tbody id="TableBody"> 
<tr><td>18.02.2014</td><td>D</td><td class="sanD">Was soll ich sagen</td></tr> 
<tr><td>18.02.2014</td><td>DD</td><td class="sanDD">hallo</td></tr> 
<tr><td>17.02.2014</td><td>R</td><td class="sanR">Erster Versuch</td></tr> 
</tbody>

但我想有這樣的輸出：意味着相同的field.date只有一行：

<tbody id="TableBody"> 
<tr><td rowspan="2">18.02.2014</td><td>D</td><td class="sanD">Was soll ich sagen</td></tr> 
<tr><td>DD</td><td class="sanDD">hallo</td></tr> 
<tr><td>17.02.2014</td><td>R</td><td class="sanR">Erster Versuch</td></tr> 
</tbody>

我該如何做到這一點？由於

小提琴：http://jsfiddle.net/V2mmw/2/

來源

2014-02-18 John Smith

基本上要「合併」具有相同日期的細胞？ –

是的，我的意思是刪除同一天的重複，只有一個大單元格 –

您可以更改數據源，包含一個包含特定日期發生次數的附加字段，或者您需要一個腳本來掃描並執行工作？ –

這裏是一個函數，你想要做什麼：

function mergeSameDates() { 
    var $firstItem, 
     sameCount = 0; 
    $("#TableBody tr td:nth-child(1)").each(function (index, item) { 
     var $item = $(item); 
     if ($firstItem === undefined || $item.text() !== $firstItem.text()) { 
      $firstItem = $item; 
      sameCount = 1; 
     } else { 
      sameCount += 1; 
      $firstItem.attr("rowspan", sameCount); 
      $item.remove(); 
     } 
    }); 
}

這裏是一個更新的demo fiddle。

來源

2014-02-18 18:37:25 zord

謝謝@ zord它是一個非常乾淨的解決方案！但是你認爲你的解決方案比@Alessandro的解決方案更快嗎？ –

我不知道。您應該在您選擇的瀏覽器上測試性能，如果這是您的首選。我只能說我的解決方案更清潔，並且不會丟失桌面上的事件處理程序（如果有的話）。另外我的代碼很容易可以推廣到_any_表的_any_列。 – zord

謝謝！我知道這是一個愚蠢的問題，但我很難選擇最好的答案！再次感謝！我會測試它！ –

我認爲你需要這樣的事情，但我用$.each功能：

var html = ""; 
var arr = new Array(); 

$.each(data, function (i, field) {  

    var rowspanTest = $.grep(data, function (elem) { 
     return elem.date === field.date; 
    }).length;  

    if(jQuery.inArray(field.date, arr) == -1){  
     html += '<tr><td rowspan=' + rowspanTest + '>' + field.date + '</td><td>' + field.art + '</td><td class="san' + field.art +'">' + field.text + '</td></tr>'; 
     arr.push(field.date); 
    }else{ 
     html += '<tr><td>' + field.art + '</td><td class="san' + field.art +'">' + field.text + '</td></tr>';   
    } 
}); 

$('#TableBody').append(html);

演示JSFiddle

來源

2014-02-18 18:37:54

感謝它爲我的問題提供了一個非常好的思想解決方案！我認爲它也快於zord的解決方案！你更喜歡什麼代碼？ –

@JohnSmith我的代碼很好地糾正了表格的創建時刻，你真的需要測試這個來驗證，但我認爲我的代碼比Zords代碼更快 –

再次感謝alessandro，最後我選擇了zords解決方案，因爲它工作更好一點！祝你有個愉快的夜晚！ –

創建使用jQuery rowspans

回答

相關問題