javascript - 用jQuery创建rowspan

我将数据从json对象附加到表中:

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/

最佳答案

这是一个可以执行您想要的功能的函数:

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。