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

【问题标题】：Removing duplicate rows in html table based on a one column基于一列删除html表中的重复行
【发布时间】：2013-04-11 09:33:43
【问题描述】：

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

【问题讨论】：

标签： jquery html html-table duplicates

【解决方案1】：

变化：

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

到：

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

FIDDLE

【讨论】：

【解决方案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/

【讨论】：

您有重复的test2 行。
@Barmar 谢谢我误解了这个问题
你的小提琴还是不行。将:first 更改为:first-child。您只选择表格中的第一个 TD，而不是每行的第一个 TD。

【解决方案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();
        }
    });
});

DEMO

【讨论】：