CODEWITHSUNDEEP
jqueryhtml-table
Matthew Goodwin
Matthew Goodwin

Reputation: 1192

Given a specific td, get td value from the top row of same column using Jquery

Title says it all. I have a table that is a list of dates across the top tr. Clicking a specific td, I want to be able to get the td value from the top row of same column using Jquery.

For example:

<table>
  <tr>
     <td>Jan 1</td>
     <td>Jan 2</td>
     <td>Jan 3</td>
  </tr>
  <tr>
     <td>col 1, row 1</td>
     <td>col 2, row 1</td>
     <td>col 3, row 1</td>
  </tr>
  <tr>
     <td>col 1, row 2</td>
     <td>col 2, row 2</td>
     <td>col 3, row 2</td>
  </tr>
  <tr>
     <td>col 1, row 3</td>
     <td>col 2, row 3</td>
     <td>col 3, row 3</td>
  </tr>

If I click any of the td's in col 1 I want to return the value "Jan 1"

If I click any of the td's in col 2 I want to return the value "Jan 2"

If I click any of the td's in col 3 I want to return the value "Jan 3"

Make sense?

Currently, I only want this to happen for empty td's so here's the start of my jQuery.

$("table td:empty").dblclick(function(){

  $(TD VALUE FROM TOP OF SAME COLUMN).text();

});

Upvotes: 0

Views: 4106

Answers (2)

TheVillageIdiot
TheVillageIdiot

Reputation: 40507

Well this can be done with the combination of index function and some filtering when selecting trs:

$("table tr").not(":first").on("click", "td", function () {
    var $tr = $(this).parents("table").find("tr:first"),
        idx = $(this).index() + 1,
        srch = "td:nth-child(" + idx + ")",
        txt = $tr.find(srch).text();
});

Working fidle is here.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

I'd suggest:

$('td').click(function(){
    var index = this.cellIndex;
    console.log($('tr').first().find('td').eq(index).text());
});

JS Fiddle demo.

Upvotes: 3

Related Questions