How to iterate through table.rows() to get both data() _and_ node() information

hwyckoff

I have a specific case where I need to run a function against checked boxes in the first column of a table.

I figured I'd have an on click function that looped through the table, gathered only checked records, and acted on the checked records.

• I can use table.rows().data() to get the table data -- but not whether the checkbox in the first column is checked.
• I can use table.rows().nodes() to identify which rows are checked, but I need to take an extra step to clean up the table data (which is actually html and not cleanly formatted data).

So I figured would iterate through the rows and act on a row-by-row level, but I'm hitting a snag. this.node() always shows up in console as [object HTMLTableCellElement] and my usual jQuery tricks of using cells[0] or $.each() aren't working.

How can I loop through the table data and identify which records are checked?

    massUpdate.on('click',
        function() {
            var oTable = $(".display").DataTable();
            var table3 = oTable.table("#InterventionDetail");

            table3.rows().every(function (index, element) {
                /* intention: gather records "checked" in 
                    first column to feed into array for later use */
                    
                var data = this.data(); /* this shows correct row data, 
                            but not whether first column checkbox is checked by user */
                
                var node = this.node(); 
                /* this shows in console.log as: [object HTMLTableCellElement] */ 

                // if this row is checked, then act on it -- otherwise next loop

                // To be defined later
            });
        });

hwyckoff

I think I found one approach. Sometimes jQuery confuses me -- why I need to wrap $() around some variables but not others.

In any case, I think this does the trick, but I'm not sure if there is a better or cleaner way to achieve the same end.

           var data = this.data();
           var row = $(this.node());
           var col0 = row.find('td:first-child input[type="checkbox"]');

           // if this row is checked, then act on it -- otherwise next loop

           if (col0.is(':checked')) {
                 console.log("data: "+data+" is checked");
           }

allan

var row = $(this.node());

This is the correct way to do it here. row().node() (which is what this.node() is executing in that context) returns a node. Not a jQuery object. So yes, if you want to use jQuery methods on it, you'd need to convert it to be a jQuery object as you have done.

Looks good!

Allan

IdahoDixon

If, however, you know the column offset for the column that you're checking, you can grab it directly:

table.rows().every(function(index, element) {
  var row = $(this.node());
  var statusElement = row.find('td').eq(6); // Index 6 - the 7th column in the table
  var isChecked = statusElement.prop('checked');
  /* ... etc ... */
});