Question

I’ve seen certain questions knocking around which are similar, but not exactly the same and I’m stumped with this one.

What I’m trying to do is create a widget that takes a table, then goes through the table’s td elements and sets a cursor:pointer (for now) to them, but only the ones that I allow.

This is how my code looks:

selectableGrid: function (options) {
            var indexes = options.columns // this is [1,2];

            return this.each(function () {
                // Make the td's in the grid selectable
                $(this).find("tbody td").attr("style", "cursor:pointer");
            });
        }

The end result I’m wanting to achieve?

<tbody>
   <td>hello</td> // index 0
   <td style="cursor:pointer">hello</td> //index 1
   <td style="cursor:pointer">hello</td> // index 2
</tbody>

Bear in mind that I could be sending through 1,3 in my array list of columns, so lt and gt don’t work for my scenario (as far as I’ve tried anyway).

EDIT:
In order to achieve this I went with the following code:

$(this).find("tr").each(function () {
         $(this).find("td").each(function (i, el) {
                if (indexes.indexOf(i) > -1) {
                    $(this).css("cursor", "pointer");
                };
         });
});

For some reason “tbody td” wouldn’t work for a singular loop as it only referenced the first iteration of the tag.

Thank you once again Stack Overflow.

Answer 1

.each takes an index parameter you can reference in your code…..:

var indexes = options.columns;
this.find("tbody td").each(function(i, el) {
    if ($.inArray(i,indexes)>-1) { // good idea, ggreiner
        $(this).css("cursor","pointer");
    };
});