Question

我有一个由许多行组成的表。

<table cellspacing="8" cellpadding="2" border="1" bgcolor="white" id="hiddenScoreTable" style="width: 635px;"><thead><tr><td align="center" style="width: 35px;">hand</td><th colspan="3" style="width: 200px;">bero</th><th colspan="3" style="width: 200px;">habazlam</th><th colspan="3" style="width: 200px;">linkin</th></tr><tr></tr></thead><tbody style="height: 100%; overflow: auto;"><tr><td>1</td><td>0</td><td>0</td><td>3000</td><td>100</td><td>100</td><td>3000</td><td>100</td><td>100</td><td>3000</td></tr><tr><td>2</td><td>0</td><td>0</td><td>3000</td><td>5</td><td>105</td><td>3000</td><td>20</td><td>120</td><td>4000</td></tr><tr><td>3</td><td>0</td><td>0</td><td>4000</td><td>25</td><td>130</td><td>3000</td><td>11</td><td>131</td><td>5000</td></tr><tr><td>4</td><td>100</td><td>100</td><td>4000</td><td>0</td><td>130</td><td>3000</td><td>5</td><td>136</td><td>5000</td></tr><tr><td>5</td><td>70</td><td>170</td><td>4000</td><td>0</td><td>130</td><td>4000</td><td>5</td><td>141</td><td>5000</td></tr><tr><td>6</td><td>3</td><td>173</td><td>5000</td><td>0</td><td>130</td><td>4000</td><td>20</td><td>161</td><td>5000</td></tr></tbody></table>

我想要逐个元素地比较第4个单元格数组[3]以删除所有相似的元素并保留第一个单元格==＆gt;表变为：

<table cellspacing="8" cellpadding="2" border="1" bgcolor="white" style="width: 635px;" id="hiddenScoreTable"><thead><tr><td align="center" style="width: 35px;">hand</td><th style="width: 200px;" colspan="3">bero</th><th style="width: 200px;" colspan="3">habazlam</th><th style="width: 200px;" colspan="3">linkin</th></tr><tr></tr></thead><tbody style="height: 100%; overflow: auto;"><tr><td>1</td><td>0</td><td>0</td><td>3000</td><td>100</td><td>100</td><td>3000</td><td>100</td><td>100</td><td>3000</td></tr><tr><td>2</td><td>0</td><td>0</td><td></td><td>5</td><td>105</td><td></td><td>20</td><td>120</td><td style="color:red">4000</td></tr><tr><td>3</td><td>0</td><td>0</td><td style="color:red">4000</td><td>25</td><td>130</td><td></td><td>11</td><td>131</td><td style="color:red">5000</td></tr><tr><td>4</td><td>100</td><td>100</td><td></td><td>0</td><td>130</td><td></td><td>5</td><td>136</td><td></td></tr><tr><td>5</td><td>70</td><td>170</td><td></td><td>0</td><td>130</td><td style="color:red;">4000</td><td>5</td><td>141</td><td></td></tr><tr><td>6</td><td>3</td><td>173</td><td style="color:red">5000</td><td>0</td><td>130</td><td></td><td>20</td><td>161</td><td></td></tr></tbody></table>

我想为所有值着色＆gt; 3000。

我只需基于jquery选择器的解决方案，如果可能的话（我不想以递归方式保存值并进行比较）。

PS：我已经有了解决方案，但我想问：当您通过jquery选择器选择第4个td时，可以使用任何类型的jquery选择器/函数将td与之前的td进行比较吗？

如果您使用.index（），您将获得父级中该td的索引，即行。你可以调整一下来选择td数组中的td，没问题。但是有一个选择器可以让你比较CONSECUTIVE TDs ?????

谢谢

Answer 1

以下工作虽然可能有点计算密集，但会对每个td 和进行迭代，每个if运行$('td').each( function(){ var numberString = parseInt($(this).text(), 10); if (numberString == 'NaN') { return false; } else if (numberString > 3000) { $(this).addClass('classForValuesOverThreeThousand'); } });;但这是我能想到的唯一方式，所以我提供：

var n, vals = [];
$('tr').each(
    function(r){
        $(this).find('td').each(
            function(c){
                n = [parseInt($(this).text(), 10)];
                if (parseInt(n) == parseInt(vals[c])){
                    $(this).text('');
                }
                vals[c] = n;
                if (vals[c] > 3000) {
                    $(this).addClass('classForValuesOverThreeThousand');
                }
            });
    });

JS Fiddle demo

<小时/> 编辑后意识到我已经省略了问题的第一部分。

坦率地说，以下是可怕的;但它确实有效。并允许任意数量的行和列;如果有人有任何更好的想法，我会非常乐意提出如何改进这一点的建议（随意编辑¹的改进，如果它在某些时候成为CW，那很好;我'我宁愿学习如何改进以下而不是担心代表：

var n, vals = [];
$('tr').each(
    function(r){
        $(this).find('td').each(
            function(c){
                n = [parseInt($(this).text(), 10)];
                if (parseInt(n) == parseInt(vals[c])){
                    $(this).text('');
                }
                vals[c] = n;
                if (vals[c] > 3000 && $(this).text().length) {
                    $(this).addClass('classForValuesOverThreeThousand');
                }
            });
    });

JS Fiddle demo

已编辑以解决OP的最新评论（问题）：

我想要的是隐藏之前在该列中显示的所有值。 [If]值＆gt; 3000显示，为第一个着色，并消除其他。

{{1}}

JS Fiddle demo

上面从单元格中删除重复的值，然后测试该值是否为＆gt; 3000 和该文本存在。

<小时/> 1.如果你能够添加一个编辑，请将那些/那些编辑添加到所发布的答案，而不是覆盖它们，这样它会逐渐变得更好，每个阶段都可以看到...

Answer 2

你可以这样做：

var results = {};  
$('tr td:nth-child(4)').each(function(index, element){
    var thisElement = $(element).html();
    if (results[thisElement]){
        $(element).html('');
    }else{
        results[thisElement] = true;
        if (thisElement > 3000){
            $(element).css('color','red');
        }
    } 

});

这是一个与第二列一起使用的小提琴http://jsfiddle.net/Aw7J6/1/（我不想写四列标记，但你只需要更改第n个子选择器中的colindex）

编辑 - 我编辑了小提琴，以便更清晰http://jsfiddle.net/Aw7J6/2/

编辑-2我编辑了我的小提琴，以便在所有列上实现相同的效果：

var numOfColumns = $('#transform tr:first > td').length;

for (i=1; i<=numOfColumns; i++){
    var results = {};
$('#transform tr td:nth-child('+i+')').each(function(index, element){

    var thisElement = $(element).html();

    if (results[thisElement]){
        $(element).html('&nbsp;');

    }else{
        results[thisElement] = true;
        if (thisElement > 3000){
            $(element).css('color','red');
        }
    }  

});
}

Fidlle：http://jsfiddle.net/Aw7J6/9/

Answer 3

Jquery是javascript所以你不能有一个javascript免费答案，仍然使用Jquery。

如果您不需要跟踪这些值，并且在写完表格后必须这样做，那么您将不得不返回每个元素。您不需要递归只是为了记住最后一个值。试试这个：

    var lastVal = "";
    $("table tr td:nth-child(4)").each(function(){
        var myVal = $(this).text();
        if(myVal == lastVal) {
            $(this).text("");
        } else {
            lastVal = myVal;
        }
        if(lastVal > 3000) $(this).css("color", "red");
    });

在表格中的单元格列上操作

3 个答案: