根据行和列在onclick中获取价值

Question

有两个div，其id分别定义为time_slice和events。 time_slice父ID为block1，而block1 id的位置为绝对位置。 事件的父ID是block2，而block2的ID位置是相对的。

我希望有人在同一时间单击事件li标签，但time_slice li标签值会返回。这里只返回事件li标签的值。

当用户单击单元格时，我也想检索时间值。当前仅填充日期。

但是我不想将div更改为表结构。

$(document).ready(function(){
    $('#events li').on('click', function(event){
        $('#utest').html($(this).html());
        var eobj = new jQuery.Event("click");
        eobj.pageY = event.pageY;
        $(document).find('.timeline').trigger(eobj);    
   });
});

$('.timeline').on('click', function(){

});

Jsfiddle

Answer 1

由于它看起来像一个表，因此您应该使用表而不是列表。 然后获取列索引和行索引，然后获取它们的值：

$('td').on('click', function() {
    //  Get row and column indexes
    var row_index = $(this).parent().index(),
        col_index = $(this).index();
    //  Get time and date values
    var time = $('tr:eq('+ row_index +') td:eq(0)').text(),
        date = $('tr:eq(0) td:eq('+ col_index +')').text();
    //  Just for a show
    alert(time + ' ' + date);
});

工作示例：https://jsfiddle.net/49cL65j1/37/

Answer 2

就这样

$("table td:not(:first-child)").on("click", function() {
  var time = $(this).parent().find("td:first-child").html(),
    date = $("table thead td").eq($(this).index()).html();
  $("table tfoot td").html(date + ' ' + time);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1px">
  <thead>
    <tr>
      <td></td>
      <td>2017-07-06</td>
      <td>2017-07-07</td>
      <td>2017-07-08</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>02:00</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>02:30</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>03:00</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>03:30</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4"></td>
    </tr>
  </tfoot>
</table>