基于一列删除html表中的重复行

时间:2013-04-11 09:33:43

标签: jquery html html-table duplicates

<table id="test" border="1">
    <tr>
        <td>test1<td>
        <td>00.00.00<td>
    </tr> 
    <tr>
        <td>test2<td>
        <td>00.00.00<td>
    </tr>
    <tr>
        <td>test1<td>
        <td>00.00.01<td>
    </tr>
    <tr>
        <td>test2<td>
        <td>00.00.01<td>
    </tr> 
</table>


<script type="text/javascript" >
var seen = {};
    $('table tr ').each(function() {
       var txt = $(this).text();
       if (seen[txt]) $(this).remove();
       else seen[txt] = true;
    });
</script>

我用上面的jquery脚本尝试了它,但是这个场景失败了。我想仅根据第一列删除重复项。对此有任何建议吗?

3 个答案:

答案 0 :(得分:1)

使用map()函数创建包含值和元素的对象数组。迭代此数组,将每个值与数组中的其他值进行比较,在遇到重复项时删除tr元素。

还应该注意的是,html有几个未公开的td标签

<强>的Javascript

var values = $("#test tr td:first").map(function(){
    return {e: this, val: $(this).html()};
});

$.each(values, function(i,e){
    $.each(values,function(ind,el){
        if(el.val == e.val){
           $(el.e).parents("tr").remove();
        }
    });
});

<强> HTML

<table id="test" border="1">
<tr>
    <td>test1</td>
    <td>00.00.00</td>
</tr> 
<tr>
    <td>test2</td>
    <td>00.00.00</td>
</tr>
<tr>
    <td>test1</td>
    <td>00.00.01</td>
</tr>
<tr>
    <td>test2</td>
    <td>00.00.01</td>
</tr> 
</table>

工作示例 http://jsfiddle.net/p72BB/3/

答案 1 :(得分:1)

var arr = $("#test tr");

$.each(arr, function(i, item) {
    var currIndex = $("#test tr").eq(i);
    var matchText = currIndex.children("td").first().text();
    $(this).nextAll().each(function(i, inItem) {
        if(matchText===$(this).children("td").first().text()) {
            $(this).remove();
        }
    });
});

<强> DEMO

答案 2 :(得分:0)

变化:

var txt = $(this).text();

为:

var txt = $("td:first-child", $(this)).text();

FIDDLE