Question

所以我创建了一个开放时间选择器，可以选择一小时的间隙。选择某个TD时，会出现一个复选标记。选择几个＆amp;按下按钮SET我希望能够得到所选TD的TH的文本在同一行和＆amp;获得垂直在所选TD上方的第一行TH的文本。下面是一张表格的图片，＆amp; HTML＆amp;我做过的JQuery代码。

   <table border="0">
  <tr>
    <th>...</th>
    <th>12AM</th>
    <th>1AM</th>
    <th>2AM</th>
    <th>3AM</th>
    <th>4AM</th>
    <th>5AM</th>
    <th>6AM</th>
    <th>7AM</th>
    <th>8AM</th>
    <th>9AM</th>
    <th>10AM</th>
    <th>11AM</th>
    <th>12PM</th>
    <th>1PM</th>
    <th>2PM</th>
    <th>3PM</th>
    <th>4PM</th>
    <th>5PM</th>
    <th>6PM</th>
    <th>7PM</th>
    <th>8PM</th>
    <th>9PM</th>
    <th>10PM</th>
    <th>11PM</th>
  </tr>
  <tr>
    <th>MONDAY</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>Tuesday</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>Wednesday</th>
   <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>Thursday</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>Friday</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>Saterday</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>Sunday</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
 <script>

 $('td').on('click', function(){
  console.log('clicked');
  $(this).toggleClass('entypo-check');

  });

 $('#set').click(function() {
    if ($('td').hasClass("entypo-check")) {
        $('td.entypo-check').addClass('disabled');
        $('td.entypo-check').removeClass('entypo-check');
        $(this).text('EDIT');
        var value=$('td.entypo-check').closest('tr').children('th').text();
      console.log(value);
    } else {
        $('td').removeClass('disabled');
        $(this).text('SET');
    }
});
</script>

Hour Table

Answer 1

您可以在一行中获取元素的jQuery index()函数（以获取其索引或您的案例中的列号），然后使用CSS选择器nth-of-type()突出显示相同的索引。

这是一个简单的例子，向您展示如何：

// get selected member from first row (pseudo function)
var index = $("tr:nth-of-type(1)").getSelected().index();

// get the value of the second row element (same column)
var value = $("tr:nth-of-type(2) > th:nth-of-type(" + index + ")").text();

请参阅JSFiddle.net上的a working example。

Answer 2

在click的{{1}}事件处理程序中，您可以使用以下语句找到该值：

td

此处，$('th:nth-of-type(' + ($(this).index() + 1) + ')').html();是指用户点击的this。

td方法返回其父级内元素的索引，然后可以将其应用于index。我们在此索引中添加一个，因为第一列（索引零）包含工作日。

通过将语句添加到事件处理程序，它将如下所示：

th

Answer 3

如果我明白你的意思，你需要使用.each()来循环entypo-check

$(document).ready(function(){
     $('td').on('click', function(){
        console.log('clicked');
        $(this).toggleClass('entypo-check');
  }); 
  $('#set').click(function() {
    $('td.entypo-check').each(function(i){
        var getDay = $(this).closest('tr').find('th').text();
        var getIndex = $(this).index();
        var getTime = $('table  tr:first-child  th').eq(getIndex).text();
        alert('Day: '+getDay+ '    Time: '+ getTime);
    });
  });

});

Working Demo

JQuery-在同一行中获取所选td的值＆amp;从相同的选定td垂直向上

3 个答案: