Climb on the DOM tree

Question

How can I read all the td cells from the certain column if I know which row to read.

Let me illustrate this:

<tr>
    <td><input type="checkbox" value="0"></td>
    <td>1</td>
    <td>John</td>
    ....
</tr>

At some point I know that I need to read value 0 and I want to know all of the other td in that row.

So in some loop I have this:

selected[i][0]

which is giving me : <input type="checkbox" value="0"> var i is going from 0

How to get all the items?

I have tried with : $('tr').eq(i).find('td').eq(1).text()

and it is not giving me the right values.

What do you mean 'read' the `td` cell, what is it you're looking to get? — David Thomas, Jul 14 '13 at 19:36
You can get all cells in row, if you selected first one, by using siblings()? — sinisake, Jul 14 '13 at 19:40
Can we see more `html` how do we know where the next column will be? — iConnor, Jul 14 '13 at 19:44
Your illustration isn't too clear. What do you want to be the *result* of this? I.e. what does "all the other `td` in that row" mean, and why do you say "from the certain column" at the start? — millimoose, Jul 14 '13 at 19:48

score 2 · Answer 1 · edited Jul 14 '13 at 19:43

2

Protip: Learn to use the awesome Firebug console to get direct output of selected elements - that's the way to intuitive code Javascript :-)

$('tr').eq(i).children('td').children('input').val()

maybe, but that's your turn.

enter image description here

edited Jul 14 '13 at 19:43

Aleksandr M

24,264
12
69
143

answered Jul 14 '13 at 19:40

Henry Ruhs

1,533
1
20
32

+1 for firebug console – Lil' Bits Jul 14 '13 at 20:00
I am familiar with Firebug...but thank you anyway :) – user123_456 Jul 14 '13 at 20:06

score 1 · Answer 2 · answered Jul 14 '13 at 19:52

Please see if the following helps, http://jsfiddle.net/sLBgY/

<script>
    function load(){
        var table = document.getElementById("mtable");
        for (var i = 0, row; row = table.rows[i]; i++) {
           if(table.rows[i].cells[0].getElementsByClassName('valTd')[0].value==0){
               for (var j = 1, col; col = row.cells[j]; j++) {
                 alert(table.rows[i].cells[j].innerText);
               } 
            }
        }
    }
</script>

<body onload="load()">
<table id="mtable">    
    <tr>
        <td><input class='valTd' type="checkbox" value="0"></td>
        <td>1</td>
        <td>John</td>
   </tr>
   <tr>
        <td><input class='valTd' type="checkbox" value="1"></td>
        <td>1</td>
        <td>John</td>
   </tr>
 </table>
 </body>

Good, just instead of the [innerText](http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox) use something more compatible, and also better compatible than `.getElementsByClassName` is here `.getElementsByTagName` or `.querySelector`: http://jsfiddle.net/sLBgY/1/ — Stano, Jul 14 '13 at 20:27

iConnor · Answer 3 · 2013-07-14T20:02:32.627

if your html will look like this

<tr>
    <td><input type="checkbox" value="0"></td>
    <td>1</td>
    <td>John</td>
</tr>

<tr>
    <td><input type="checkbox" value="0"></td>
    <td>2</td>
    <td>Julie</td>
</tr>

then you would simply do this

   $('tr').each(function( index, element) {
      var $element = $(element),
          checkbox = $element.children(0)[0];
          id = $element.children(1); 
          name = $element.children(2);
   });

Demo Link

score 0 · Answer 4 · answered Jul 14 '13 at 19:53

This will find all the cells in the correct row:

$(function () {
    var found = false;
    $('table tr').each(function () {
        var cells = $(this).children('td');
        if (cells.eq(0).find('input').val() == 0) { // the value you're looking for
            found = cells;
        }
    });
    if (found) {
        alert(found.eq(0).html() + found.eq(1).html() + found.eq(2).html());
    }
});

http://jsfiddle.net/7VmR9/16/

Lil' Bits · Accepted Answer · 2013-07-14T20:00:00.620

At some point I know that I need to read value 0 and I want to know all of the other td in that row.

If I am understanding you correctly, this should give you your intended results using the jQuery library:

$("td input[value='0']").parent().parent().children("td").each(function(){
    alert($(this).text()); //Replace alert with however you want to output your data
});

Explanation:

$("td input[value='0']") will select all <input /> tags with the attribute value set to 0, contained within a <td> tag

.parent() will go to the parent <td> tag

.parent() will go to the parent <tr> tag

.children("td") will select all of the <td> tags contained within the respective tr tag

.each(function(){...}) will do something with those <td> tags

$(this).text() will select the <td>'s text

Climb on the DOM tree

5 Answers5