使用jquery创建rowspans

Question

我将json-object中的数据附加到表中：

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

实际上这很好用，我得到这样的输出：

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

Answer 1

这是一个可以做你想要的功能：

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。

Answer 2

我认为你需要这样的东西，但我使用$.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