How do I pull data from a javascript populated table?

Question

I am trying to pull data from my populated javascript table. How do I pull the value from a javascript row? I am using

            for (var i = 0; i < rowCount; i++) { 
            var row = table.rows[i]; 
            //This is where I am having trouble 
               var chkboxIndicator = row.cells[0].childNodes[1]; 
               alert(chkboxIndicator);
            //
            if (chkboxIndicator == indicator && Checkbox.checked == false) { 
                table.deleteRow(i); 
                rowCount--; 
                i--; 
            } 
        } 

which has an alert message of "undefined". I tried .value and .text as well and no progress. How do I get the text from the childNodes?

Answer 1

Are you sure that chkboxIndicator is not null?

If it is null it will alert as undefined.

Try

for (var i = 0; i < rowCount; i++) 
{ 
    var row = table.rows[i]; 
    // Add null check for row
    if (row != null)
    {
        //This is where I am having trouble 

        // Add null check for cell
        if (row.cells[0] != null)
        {
            var chkboxIndicator = row.cells[0].childNodes[1];

            // Added null check for chkboxIndicator
            if (chkboxIndicator != null)
            {
                alert(chkboxIndicator);


                if (chkboxIndicator == indicator && Checkbox.checked == false) 
                { 
                    table.deleteRow(i); 
                    rowCount--; 
                    i--; 
                }
            }
            else
            {
                alert('chkboxIndicator is NULL');
            }       
        }
    }
}

Answer 2

Depends on what your DOM actually looks like.

I suspect your problem is that childNodes[1] could be a text node.

You probably want to use a selector on the cell instead, such as:

$(row.cells[0]).find("input[type='checkbox']");

Answer 3

Since you're purportedly using jQuery, why not use it to get your checkboxes and simplify your life?

$("#mytableid tr").each(function() {
    // find the checkbox (assuming you have only one; if not, use :eq(n))
    var $checkbox = $("input:checkbox", this);
    // if it's checked, delete this row
    if ($checkbox.is(":checked"))
        $(this).remove();
});

There are crazier ways to do it, but I thought that example would be illustrative. :)

Answer 4

If you want it to be fast too, use jOrder (http://github.com/danstocker/jorder).

Create a jOrder table with your data. Make sure to have a field 'checked' in it with true or false values, and put an index on that column and the ID:

var table = jOrder(data)
    .index('id', ['ID'])
    .index('checked', ['checked'], { grouped: true });

Then, you can rebuild your grid with the unchecked rows removed using table.where([{ 'checked': true }]) as the source.

But first, populate your grid with the data from the jOrder table. Use table.flat() to obtain the flat table. When you build the grid, bind the record IDs to the checkboxes e.g. by $('#elem').data(). When a checkbox gets (un)checked, update the 'checked' value in the table:

var before = table.where([{ 'ID': 5 }])[0];
var after = table.where([{ 'ID': 5 }])[0];
after.checked = true;
table.update(before, after);

Note that you shouldn't do this for each item on an "(un)check all" event though. In that case just simply pass on table.flat() or set the 'checked' values in the buffer returned by it, and then issue a table.reindex() and THEN call table.where(...).

Answer 5

The block of code that I was missing was the following

var row = table.rows.item(i).cells;
var cellLength = row.length;
var cellVal = row.item(5).innerHTML;

Thanks for leading me in the right direction