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

Question

<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 脚本进行了尝试，但在这种情况下失败了。我想仅根据第一列删除重复项。请问对此有什么建议吗？

Answer 1

改变：

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

至：

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

小提琴

Answer 2

使用该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/

Answer 3

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

演示