Javascript 使用jquery创建行范围

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

我怎样才能做到这一点？谢谢

---

Fiddle:

这里有一个函数，可以实现您想要的功能：

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

---

这是一个更新版。

我想您需要这样的功能，但我使用了

$。每个
功能：

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

var html=”“；
var arr=新数组（）；
$.each（数据、函数（i、字段）{
var rowspanTest=$.grep（数据、函数（elem）{
返回elem.date==field.date；
}).长度；
if（jQuery.inArray（field.date，arr）=-1）{
html+=''+field.date+''+field.art+''+field.text+''；
arr.push（字段日期）；
}否则{
html+=''+field.art+''+field.text+''；
}
});
$（'#TableBody'）.append（html）；

Demo
基本上，您希望“合并”具有相同日期的单元格？是的，我的意思是删除同一天的重复内容，只制作一个大单元格。您可以更改数据源，以包含一个包含特定日期出现次数的附加字段，或者你需要一个脚本来扫描并完成这项工作？我需要javascript来完成这项工作！你有什么想法吗？谢谢你的帮助！这只会在一个特定的日期起作用。请给我一点时间，试着说句公鸡，保姆，通过电话回答：）谢谢@zord这是一个非常干净的解决方案！但是你认为你的解决方案比@Alessandro的解决方案快吗？我不知道。如果优先考虑的话，您应该在您选择的浏览器上测试性能。我只能说我的解决方案更干净，并且不会从表中丢失事件处理程序（如果有的话）。另外，我的代码很容易推广到任何表的任何列。谢谢！我知道这是一个愚蠢的问题，但我真的很难选择最好的答案！再次感谢！我会测试它！谢谢，这是一个很好的解决我问题的方法！我认为它也比zord的解决方案更快！您喜欢哪种代码？@JohnSmith我的代码在创建表的那一刻很好地更正了表，您确实需要对此进行测试以验证，但我认为我的代码比Zords代码快再次感谢alessandro，最后我选择了Zords解决方案，因为它工作得更好一点！祝你晚上愉快！
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();
        }
    });
}

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