how to get th's value from td in jquery?

Question

My table design is as follows :

  <table>
      <thead>
         <tr><th class='fc-id1 ui-widget-header'>09:00</th></tr>
         <tr><th class='fc-id2 ui-widget-header'>09:30</th></tr>
         <tr><th class='fc-id3 ui-widget-header'>10:00</th></tr>
      </thead>
      <tbody>
          <tr id='res1'><td class='fc-id4 ui-widget-content fc-resource1 '><div class=day-content'></div></td></tr>
          <tr id='res2'><td class='fc-id5 ui-widget-content fc-resource2 '><div class=day-content'></div></td></tr>
          <tr id='res3'><td class='fc-id6 ui-widget-content fc-resource3 '><div class=day-content'></div></td></tr>
      </tbody>
  </table>

Now on the page load i want to compare th's value with current time. I have unique resourceid to compare with tr id and td class.

I am trying with this code. but its not working. Its giving null value.

  var td = $('.fc-resource'+ id); // this id will be the unique id coming from ajax.
  var th = td.closest('tbody').prev('thead').find('> tr > th:eq(' + td.index() + ')').html();
  alert(th);

can anyone help me please ?

http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values?rq=1 Check this.. — Chaitanya Gadam, May 14 '13 at 05:40
@sudhir: sorry its td instead of $d. and id will be the resourceid i.e 1 or 2 or 3. — Mausami, May 14 '13 at 05:43
Your html is bit odd. You have three rows of heading (each one cell). And then three rows of data (each one cell) displayed below all the heading rows. — Kamil Szot, May 14 '13 at 06:10
It is jquery fullcalendar's resourceview's html. I need this code working for jquery fullcalendar only. — Mausami, May 14 '13 at 06:18

Harry Bomrah · Answer 1 · 2013-05-14T06:07:46.527

3

Why dont you just use

  var td = $('.fc-resource'+ id); 
  var head = td.parent().parent().parent().find("thead");
  var th = head.find("th:eq("+td.index()+")");
  alert(th.text());

edited May 14 '13 at 06:07

answered May 14 '13 at 05:53

Harry Bomrah

1,658
1
11
14

but th has unique class which is fc-id1,fc-id2... you can use that – Harry Bomrah May 14 '13 at 05:56
try this, i think this is what u want. – Harry Bomrah May 14 '13 at 06:08
ya i also think so but its still displaying null. – Mausami May 14 '13 at 06:15
can u make a fiddle of ur code? It ll be easier for me to know where is the bug. – Harry Bomrah May 14 '13 at 06:18
It is a jquery fullcalendar's resource view page's html and i need this code to work with jquery fullcalendar. – Mausami May 14 '13 at 06:59
how can i give you my code ? its too long. and i don't have login in fiddle. – Mausami May 14 '13 at 07:11
hey I have updated my code in this fiddle. can you please check it ? http://jsfiddle.net/Zfym5/1/ – Mausami May 14 '13 at 07:15
Ok i found out one problem but i m not sure right now that which th exactly you want coz when u use var td = $('.fc-resourcemausami pandit'); will give u array of td. and instead of the above use this var td = $('.fc-resourcemausami.pandit'); this will give you an array of tds u can console.log(td) to see them. – Harry Bomrah May 14 '13 at 07:33
ya i will try with td = $('.fc-resourcemausami'); – Mausami May 14 '13 at 23:36

score 1 · Answer 2 · answered May 14 '13 at 05:55

1

Working FIDDLE Demo

You get invalid index for your td. You must get index for it's parent tr. See:

var id = 2;
var td = $('.fc-resource' + id);
var tr = td.closest('tr');
var index = tr.index();
var th = td.closest('tbody').prev('thead').find('> tr > th:eq(' + index + ')').html();
alert(th);

Also don't forget check the FIDDLE demo.

answered May 14 '13 at 05:55

thanks mojtaba. i also think so that this should work but its still displaying null. – Mausami May 14 '13 at 06:16
Did you check the jsFiddle? I'm getting `09:30`. – May 14 '13 at 06:18
I have updated my code in this fiddle. can you please check it ? http://jsfiddle.net/Zfym5/1/ – Mausami May 14 '13 at 07:13
@Mausami You have error in `HTML` markup. First, you have multiples `id` with same value. Second, your `id` has an `space`. `id="fc-resourcemausami pandit"`. It's invalid in HTML. – May 14 '13 at 07:18

Kamil Szot · Accepted Answer · 2013-05-14T06:16:49.413

1

Just slight alteration to your code and it should work:

var td = $('.fc-resource'+ id); // this id will be the unique id coming from ajax.
var th = td.closest('tbody').prev('thead').find('> tr > th:eq(' + td.closest('tr').index() + ')').html();
alert(th);

Please note .closest('tr') before .index()

Here http://jsfiddle.net/RDZFU/ you can see that it works with html code you provided.

edited May 14 '13 at 06:16

answered May 14 '13 at 06:08

Kamil Szot

17,436
6
62
65

Are you sure that your html code looks exactly as you posted here? The code you posted seems to work properly with the code from my answer. Please check the js fiddle demo I provided. – Kamil Szot May 14 '13 at 06:17
ya i checked my html code also. It is jquery fullcalendar in which i need to use this. – Mausami May 14 '13 at 06:55
hey I have updated my code in this fiddle. can you please check it ? http://jsfiddle.net/Zfym5/1/ – Mausami May 14 '13 at 07:14
@Mausami Try this one: http://jsfiddle.net/Zfym5/2/ It will work and give you the content of the header right above the first cell you picked as `td`. Since all cells in your fiddle have same `.fc-resource...` class it will be the first one. – Kamil Szot May 14 '13 at 09:50
It is working. thanks kamil. but its giving me first th's value. how can i get all th's value so that i can compare it with give time value ? – Mausami May 14 '13 at 23:41
No worries. I get it with td.each() function. Thanks a lot for your help. – Mausami May 14 '13 at 23:47

SomeShinyObject · Answer 4 · 2013-05-14T06:29:41.513

Use the eq() method along with what was returned from the AJAX request. Add an id to your table for specificity:

var id = 1; //from AJAX
var th = $('#myTable th').eq($('.fc-resource'+id).index()).html();
alert(th);

Also, your markup is kind of messed up. You forgot to close some things up:

<table id="myTable">
    <thead>
        <tr>
            <th class='fc-id1 ui-widget-header'>09:00</th>
        </tr>
        <tr>
            <th class='fc-id2 ui-widget-header'>09:30</th>
        </tr>
        <tr>
            <th class='fc-id3 ui-widget-header'>10:00</th>
        </tr>
    </thead>
    <tbody>
        <tr id='res1'>
            <td class='fc-id4 ui-widget-content fc-resource1'>
                <div class='day-content '></div>
            </td>
        </tr>
        <tr id='res2 '>
            <td class='fc-id5 ui-widget-content fc-resource2 '>
                <div class='day-content'></div>
            </td>
        </tr>
        <tr id='res3'>
            <td class='fc-id6 ui-widget-content fc-resource3'>
                <div class='day-content'></div>
            </td>
        </tr>
    </tbody>
</table>

jsFiddle

but i have 2 more tables on the same page. will this each function work ? and yes i forgot to close some tags. thanks a lot. — Mausami, May 14 '13 at 05:47
and i need to get the th value whose td's class will match with the resource id. how can i get the th's value of a particular td whose class will match with the resourceid ? — Mausami, May 14 '13 at 05:53
@Mausami, I updated code and the jsFiddle. If that isn't what you want then I am completely lost — SomeShinyObject, May 14 '13 at 06:30

score 0 · Answer 5 · answered May 14 '13 at 05:48

0

Try

$('th').each(function () {
    var $this = $(this);
    var d = new Date();
    var text = $this.text();
    var parts = text.match(/(\d+):(\d+)/);
    if (parseInt(parts[1], 10) == d.getHours() && parseInt(parts[2], 10) == d.getMinutes()) {
        $this.addClass('now');
    }
});

Demo: Fiddle

answered May 14 '13 at 05:48

Arun P Johny

384,651
66
527
531

thanks arun. but i need to get the th value whose td's class will match with the resource id. how can i get the th's value of a particular td whose class will match with the resourceid ? – Mausami May 14 '13 at 05:53

how to get th's value from td in jquery?

5 Answers5

jsFiddle