CODEWITHSUNDEEP
jqueryarraysloopseach
user2571510
user2571510

Reputation: 11377

jQuery: check if column contains TD with certain class

I am using the following lines to create an array of all TDs matching a certain search term. If a TD contains my search term then it has the class "highlight" added.

The below works fine so far my only problem is that I need to add 0 if one column does not contain my search term (a column either has the value or not but it cannot appear more than once in the same column).

The columns in question are columns 2, 4, 6, 8, 10, 12 so my array should always contain 6 values and just show 0 if one of these columns does not contain the search term.

In other words: I need to check whether a column contains a TD with the class "highlight" or not.

My function: 

var arr = new Array();
$('.highlight').each(function() {
    arr.push($(this).text());
});

Example HTML: 

<table id="myTable">
    <thead>
        <tr>
            <th></th>
            <th class="mayContainHighlight"></th>
            <th></th>
            <th class="mayContainHighlight"></th>
            <th></th>
            <th class="mayContainHighlight"></th>
            <th></th>
            <th class="mayContainHighlight"></th>
            <th></th>
            <th class="mayContainHighlight"></th>
            <th></th>
            <th class="mayContainHighlight"></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td class="mayContainSearchTerm highlight">search term</td>
            <td>5</td>
            <td class="mayContainSearchTerm highlight">search term</td>
            <td>7</td>
            <td class="mayContainSearchTerm highlight">search term</td>
            <td>3</td>
            <td class="mayContainSearchTerm">other data</td>
            <td>1</td>
            <td class="mayContainSearchTerm highlight">search term</td>
            <td>5</td>
            <td class="mayContainSearchTerm">other data</td>
            <td>1</td>
        </tr>
        // more TRs...
    </tbody>
</table>

Hope someone can help me with this. Many thanks in advance, Tim.

Upvotes: 0

Views: 14591

Answers (2)

Dekron
Dekron

Reputation: 1212

If i have understand what do you mean and you don't have any other TD in the page ( if you have you need to identify the ones you want select)

you can edit you cod with this:

var arr = new Array();
$('TD').each(function() {
  if( $(this).hasClass("highlight") )
    arr.push($(this).text());
  else
    arr.push("0");
});

Upvotes: 5

MackieeE
MackieeE

Reputation: 11862

By using an object, you can use a key: value storage, which is what I think you're requiring for knowing which columns have what value, for which they default to 0 if unmatched. Furthermore, the .each() loop itself is filtered by selecting only of those with highlight attached:

<table>
    <tr>
        <td data-column="2">Column2 </td>
        <td data-column="4">4th Column</td>
        <td data-column="6">Sixth Test</td>
        <td data-column="8">8More</td>
        <td data-column="10">10th Col</td>
        <td class="highlight" data-column="12">last Col</td>
    </tr>
</table>

<script>
    var obj = {
        2:  0,
        4:  0,
        6:  0,
        8:  0,
        10: 0,
        12: 0
    };

    $('td.highlight').each(function (index, element) {
        obj[$(element).data('column')] = $(this).text();
    });

    //Prints 'last Col'
    console.log( obj[12] );
</script>

Fiddle: http://jsfiddle.net/fZDYv/

Upvotes: 1

Related Questions