operating on cells column in a table

Question

i have a table consisting of many rows.

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

i want the 4th cell array, cell[3], to be compared element by element to delete all similar elements and just keep the first one ==> table becomes:

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

and i wanna color all values > 3000.

I need a solution only based on jquery selectors,if possible ( i don't want to recursively save the value and compare).

PS: i already have a solution working, but i want to ask: when u select the 4th td by jquery selector, can u compare a td to its previous using any kind of jquery selectors/functions??

if u use .index(), you are getting the index of that td in the parent, which is row. you can tweak it a bit to be selecting the td in the td array, no problem. but is there a selector that lets you compare CONSECUTIVE TDs ?????

Thanks

Answer 1

The following works, albeit it might be a little computationally intensive, iterating over each td and running the if on each; but it's the only way I could think of, so I offer:

$('td').each(
    function(){
        var numberString = parseInt($(this).text(), 10);
        if (numberString == 'NaN') {
            return false;
        }
        else if (numberString > 3000) {
            $(this).addClass('classForValuesOverThreeThousand');
        }
    });

JS Fiddle demo.

---

Edited after realising I'd omitted part one of the question.

The following is, frankly, horrible; but it does work. And does allow for any number of rows and columns; if anyone has any better ideas I'd be more than happy for suggestions as to how to improve this (feel free to edit improvements in¹, if it becomes CW at some point, that's fine; I'd rather learn how to improve the following than worry about the rep):

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.

---

Edited to address latest comment (to the question) from the OP:

what [I] want is to hide all values that have shown before in that column. [If] a value > 3000 shows up, color the first one, and eliminate the others.

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.

The above removes the duplicated value from the cell, and then tests that the value is > 3000 and that text is present.

---

1. If you're able to add an edit, please add that/those edit(s) to the posted answer, rather than over-writing them, so it gets incrementally better and each stage can be seen...

Answer 2

You could do:

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

});

Here is a fiddle http://jsfiddle.net/Aw7J6/1/ that works with the second column (i didn't want to write four columns of markup, but you just need to change the colindex in the nth-child selector)

EDIT - i edited the fiddle so that it's clearer http://jsfiddle.net/Aw7J6/2/

EDIT -2 I edited my fiddle to achieve the same effects on all columns:

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 IS javascript so you can't have a javascript free answer and still use Jquery.

If you don't need to keep track of the values and you have to do this after you write out the table then you'll have to go back through each element. You don't need recursion just to remember what the last value was. Try this:

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