Question

我的表格设计如下：

  <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>

现在在页面加载中我想比较当前时间的值。我有唯一的resourceid来与tr id和td类进行比较。

我正在尝试使用此代码。但它不起作用。它给出了空值。

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

有人可以帮我吗？

Answer 1

为什么不使用

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

Answer 2

Working FIDDLE Demo

您的index无效td。您必须为其父index获取tr。参见：

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

另请不要忘记查看FIDDLE demo。

Answer 3

对您的代码进行轻微更改，它应该可以正常工作：

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

请在.closest('tr')

之前注意 .index()

此处http://jsfiddle.net/RDZFU/您可以看到它适用于您提供的HTML代码。

Answer 4

使用eq()方法以及从AJAX请求返回的内容。在表格中添加id以获取特异性：

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

此外，你的标记有点搞砸了。你忘了关闭一些事情：

<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

Answer 5

尝试

$('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');
    }
});

演示：Fiddle

如何从jquery中的td中获取th的值？

5 个答案:

jsFiddle