CODEWITHSUNDEEP
jqueryhtml
Mausami
Mausami

Reputation: 692

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

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 ?

Upvotes: 0

Views: 8786

Answers (5)

SomeShinyObject
SomeShinyObject

Reputation: 7801

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

Upvotes: 0

Kamil Szot
Kamil Szot

Reputation: 17817

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.

Upvotes: 1

Harry Bomrah
Harry Bomrah

Reputation: 1668

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());

Upvotes: 3

user1823761
user1823761

Reputation:

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.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 0

Related Questions