jQuery: how to navigate a table row to extract cell data

I am trying to navigate a table row that has been clicked, to extract data from other parts of the row.

this is the HTML snippet of the row that was clicked on:

<tr><td class=" sorting_1">Foobar</td>
    <td>Hello</td><td><a href="/some/path/abc.html">42</a></td>
    <td>0</td>
    <td><img src="/images/img.gif"></td>
    <td>7:44 AM</td>
    <td><ul><li><a href="/path2/read/3">Read it</a></li>
            <li><a class="booboo" href="#">Just do it</a></li>
        </ul></td>

The cell element that was clicked on has class "booboo".

I want to be able to select the following data:

• the id used in the url of the previous li a sibling (it is 3 in the example given above)
• the name in the first column (it is 'Foobar' in the example given)
• the url of the anchor elem in the 2nd cell (should be /some/path/abc.html in this example)

Can anyone point out the functions required to navigate a table row, preferably with a snippet showing how to select the values in the sa开发者_StackOverflowmple snippet shown above?

No hill for a climber...

$("table a.booboo").click(function() {
    var $this = $(this);
    var tr = $this.closest("tr"); 

    // the id used in the url of the previous li a sibling
    var a = $this.closest("ul").find("li:first a").attr("href");
    a = a.substring(a.lastIndexOf("/") + 1);
    alert(a);

    // the name in the first column
    var b = tr.find("td:first").text();
    alert(b);

    // the url of the anchor elem in the 2nd cell
    var c = tr.find("td:eq(2) a").attr("href");
    alert(c);
});

Demo on jsFiddle

You'll want the various methods in the "traversing" section of the docs, in particular:

• parent to go from the a that was clicked to the li it's in.
• prev to go from the li to the previous li.
• parents (probably .parents("tr:first")) to get to the row itself. Gah! As Josh points out, I meant closest. (And I use closest. And yet...)
• find to find elements within the row (e.g., row.find("td:first").text() to get the text of the first cell)

...as well as attr, possibly, to get the href attribute value.

How about adding all the related data as attributes of your a.booboo when you generate the table?

<a class="booboo"
   data-id="3"
   data-name="Foobar"
   data-url="/some/path/abc.html">Just do it</a>

Then you can retrieve the data like this:

$('a.booboo').click(function() {
  var user = $(this).data()
  alert(user.id)
})

I think it's a better solution because it doesn't depend on the exact structure of your HTML code and it's cleaner than the other solutions proposed.

$(".booboo").click(function() {

  var a = $(this);
  var tr = a.closest("tr");

  var readItUrl = a.closest("li").prev().find("a").attr("href");
  var tdText = tr.find("td:first").text();
  var tr.find("td:eq(1) > a").attr("href");

});

If the html structure is fixed, you can use this:

$(".booboo").click(function(){
  var tr = this.parentNode.parentNode.parentNode.parentNode;
  var foobar = tr.cells[0].innerHTML;
  var url = tr.cells[2].firstChild.href;
  var id = this.parentNode.previousSibling.firstChild.href.match(/\d+$/)[0];
  // ...
});