使用jquery选择后如何找到td的表头[关闭]

Posted 2023-05-08

【中文标题】使用jquery选择后如何找到td的表头[关闭]

【英文标题】：how to find table head of a td after selecting with jquery [closed]

【发布时间】：2012-12-10 08:55:39

【问题描述】：

嗨 如上图所示，我正在创建一个简单的日历以在我的项目中使用。

表格的html：

<table>
<tr><th>time</th><th>2012-12-23</th>etc..</tr>
<tr><th>09:00AM</th><td></td><td></td>etc...</tr>

我使用 jquery(selectable) 让那些 td 可选择。

我的问题：当用户点击保存时，将表单数据发布到 php 文件中，我怎样才能包含所选 td 的日期和时间？

例如：我希望当用户点击立即保存（在 img 上方）时，它会发送 “2012-12-24 12:00 PM”

---

问题已解决“raina77ow”答案。

但是从 cmets 和我的 -ve 投票来看，我认为我的问题很简短，所以我添加了代码以使事情变得清晰：0

HTML

  <FORM id='booking_form'>
A form that u see above in img</form><a id='save'>save</a>
        <h1>Week Calendar</h1>
        <div class="body">
            <table id='schedule'>
                <thead>
                <tr><th>Time</th><?foreach($cal[0] as $d)echo "<th>$d</th>";//$cal[0]contain week days starting from today?></tr>
                </thead>
                <?//create our table by nice clean loop
                $start_time = "09:00:00";
            $end_time = "20:00:00";
            while(strtotime($start_time) <= strtotime($end_time))?>
            <tr>
                <th><?=date("h:i A", strtotime($start_time));?></th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <?
            $start_time = date("H:i:s", strtotime("$start_time +60 minutes"));
            //end while
            ?>

            <tr></tr>
    </table>

点击保存按钮时的JS

var datas=$('#booking_form').serialize();
        var request = $.ajax(
                        url: "./booking/add",
                        type: "POST",
                        data: datas,
                        dataType: "html"
                        );

        request.done(function(msg) $info.html( msg ););
        request.fail(function(jqXHR, textStatus) $info.html( "<div id='error'>" + textStatus +"</div>"););
        request.success(function(data)$info.html(data););
        return false;

这是我的问题，如何将所选字段的时间和日期添加到该 ajax 帖子中。 感谢您的回答，我想出了在#booking_form name=date 和 name=time 中添加 2 个隐藏输入，并添加了选定的选项来为它们添加值。

    $schedule.selectable(
    filter: 'td',
    selected: function( event, ui ) 
        var time = $(ui.selected).parent().children(':first').text();
            date = $(ui.selected).closest('table').children(':first').find('th').eq($(ui.selected).index()).text();
        $('#booking_form').find('[name=date]').val(date);
        $('#booking_form').find('[name=time]').val(time);
    
    );

I find this as the Best answer 非常感谢

【问题讨论】：

这完全取决于您没有共享的现有代码。到目前为止，您还尝试过什么？在发布任何问题之前，请按照您需要确认的ask advice。请记住，只有您想要某些东西并且您问自己它是如何编程的，这本身并不符合编程问题。 - 根据标签，您似乎已经知道答案：Jquery selectors - 请查阅手册了解您的支持选项。

添加了更多细节，我不想让问题更早看起来很大！是的，我知道这是一个选择器问题，但我一直在尝试并无法找出 .closest('table') !!，感谢任何方式

这个答案已经关闭，所以我在this fiddle 中给出答案，因为jQuery.selectable 有自己的方法来做这种工作，这是正确的方法，IMO。

@Sheikh 这就是我要找的东西，非常感谢

【参考方案1】：

获取时间非常容易 - 因为它是点击行的第一个单元格。要获取“日期”列，我们可以使用index 方法。

$('td').click(function() 
  var $cell = $(this);
    time = $cell.parent().children(':first').text();
    date = $cell.closest('table').children(':first').find('th').eq($cell.index()).text();
    alert(date + ' ' + time);
);​

JS Fiddle.

【讨论】：

jQuery.selectable 有自己的方法来做这种工作，this is the proper way，IMO。

@raina77ow，你拯救了我的一天。上帝保佑你

【参考方案2】：

试试这个：

$('td').click(function() 
    var $td = $(this);
    var $th = $td.closest('table').find('th').eq($td.index());

    // Get the header text...
    alert($th.text());

    var $firstTD = $td.closest('tr').find('td:first');

    // Get the first td text...
    alert($firstTD.text());
);​

【讨论】：

jQuery.selectable 有自己的方法来做这种工作，this is the proper way，IMO。

【参考方案3】：

只要使用纯 javascript，一旦您拥有 <td>，您就可以获得：

var time = td.parentNode.cells[0].firstChild.nodeValue,
    date = td.parentNode.parentNode.rows[0].cells[td.cellIndex].firstChild.nodeValue;

【讨论】：

我不知道你在谈论朋友，抱歉我不是 js 人:(

jQuery.selectable 有自己的方法来做这种工作，this is the proper way，IMO。