select specify row using Jquery

Question

Hi all

I have a HTML table like below:

ColA       ColB  ColC ColD ColE ColF
Checked    AAAA  BBBB CCCC DDDD EEEE
Unchecked  AAAA  BBBB CCCC DDDD EEEE
Checked    AAAA  BBBB CCCC DDDD EEEE
Checked    AAAA  BBBB CCCC DDDD EEEE
Unchecked  AAAA  BBBB CCCC DDDD EEEE
Checked    AAAA  BBBB CCCC DDDD EEEE
Checked    AAAA  BBBB CCCC DDDD EEEE

ColA is a Check box. I want to get the ColD value of all rows whose ColA is Checked. I want to use the jquery to do it. Does anyone meet it before?

Best Regards,

Answer 1

The no-jQuery solution

var inputs = document.getElementById("tableId").getElementsByTagName("input"), input, i = inputs.length;
while (i--){
    input = inputs[i];
    if (input.type == "checkbox" && input.checked){
         console.log(input.parentNode.parentNode.childNodes[3].innerHTML);
    }
}

This is guaranteed to be a lot faster than any of the css-selector methods (and easier to understand).

And a slight rewrite to return an array

var array_of_values = (function(table){
    var values = [], inputs = table.getElementsByTagName("input"), i = inputs.length;
    while (i--) 
        if (inputs[i].type == "checkbox" && inputs[i].checked) 
            values.push(inputs[i].parentNode.parentNode.childNodes[3].innerHTML);
    return values;
})(document.getElementById("tableId"));

Answer 2

var array_of_the_values = $('table input:checked').map(function() { 
    return $(this).parents('tr').find('td:eq(3)').text();
  }).get();

Answer 3

$('table input:checked').parent('tr').find('td:eq(3)').text();