работает на столбце ячейки в таблице

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], сравнивался поэлементно, чтобы удалить все подобные элементы, и просто сохранить первую таблицу ==>:

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

и я хочу покрасить все значения> 3000.

Мне нужно только решение на основе селекторов jquery, если возможно (я не хочу рекурсивно сохранять значение и сравнивать).

PS: у меня уже есть работающее решение, но я хочу спросить: когда вы выбираете 4-й селектор td by jquery, можете ли вы сравнить td с его предыдущим, используя любой вид селекторов / функций jquery ??

если вы используете .index (), вы получаете индекс этого td в родительском элементе, который является строкой. Вы можете немного изменить его, чтобы выбрать td в массиве td, нет проблем. но есть ли селектор, который позволяет сравнивать ПОСЛЕДОВАТЕЛЬНЫЕ ТД ?????

Спасибо

Answer 1

Вы можете сделать:

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/, которая работает со вторым столбцом (я не хотел писать четыре столбца разметки, но вам просто нужно изменить colindex в селекторе nth-child)

РЕДАКТИРОВАТЬ - я отредактировал скрипку, чтобы она стала понятнее 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 2

Следующие работы, хотя это может быть немного вычислительно интенсивно, итерируя по каждому td и , запуская if на каждом; но я могу думать только об этом, поэтому я предлагаю:

$('td').each(
    function(){
        var numberString = parseInt($(this).text(), 10);
        if (numberString == 'NaN') {
            return false;
        }
        else if (numberString > 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).addClass('classForValuesOverThreeThousand');
                }
            });
    });

JS Fiddle demo .

<ч />

Отредактировано для адресации последнего комментария (к вопросу) из ФП:

[I] хочет скрыть все значения, которые были показаны ранее в этом столбце. [Если] отображается значение> 3000, закрасьте первое и удалите остальные.

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 .

Вышеуказанное удаляет дублированное значение из ячейки, а затем проверяет, что это значение> 3000 и , что текст присутствует.

<час /> 1. Если вы можете добавить правку, добавьте / те правки (-и) к опубликованного ответа, а не перезаписывайте их, чтобы он постепенно улучшался, и каждый этап можно было увидеть ...

Answer 3

Jquery IS 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");
    });