jQuery父级或父级在表格标签中获取数据属性

I have a table that are like a grid with a horizontal list in the top with week numbers within th tags and below each week are different values in rows of tr and td tags.

我有一个表格，就像一个网格，顶部有一个水平列表，第th个标签内的周数，每周下面是tr和td标签行的不同值。

I'm trying to get the data-attribute for the week when I click below in one of the td tags with the data-id attribute. But I can't get it right and wonder what I have done wrong to be able to read this value?

我正在尝试获取本周的数据属性，当我在其中一个带有data-id属性的td标签中单击下面时。但我无法理解并且想知道我做错了能够读取这个值吗？

Some of the combinations I have tested:

我测试过的一些组合：

var test = $(this).closest("th").attr("data-week");
var test = $(this).parents().find(".week").attr("data-week");
var test = $(this).parents("th").attr("data-week");

The HTML with data-attributes for the table:

包含表的数据属性的HTML：

 <table>
        <thead>
            <tr>
                <th class=""></th>
                    <th class="week" data-week="15">15</th>
                    <th class="week" data-week="16">16</th>
                    <th class="week" data-week="17">17</th>
                    <th class="week" data-week="18">18</th>
                    <th class="week" data-week="19">19</th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>Stina (1)</td>
                            <td data-id="40">10</td>
                            <td data-id="12">20</td>
                            <td data-id="13">40</td>
                            <td data-id="14">45</td>
                            <td data-id="15">40</td>
                </tr>
                <tr>
                    <td>Linda (2)</td>
                            <td data-id="0">0</td>
                            <td data-id="0">0</td>
                </tr>
                <tr>
                    <td>Lasse (3)</td>
                            <td data-id="21">5</td>
                            <td data-id="22">39</td>
                            <td data-id="23">40</td>
                            <td data-id="24">40</td>                       
                </tr>
        </tbody>
</table>

4 个解决方案

#1

@Sean DiSanti, good one! Here is a slightly more efficient version, without warping $ in $, by using eq method

@Sean DiSanti，好一个！这是一个稍微高效的版本，不使用eq方法扭曲$ in $

$('td').on('click', function(e) {
  var index = $(this).index() -1;
  var week = $('.week').eq(index).data('week');
  console.log('week', week);
});

jsfiddle

的jsfiddle

#2

Here is a way you can find the data-week attribute of the clicked th element.

这是一种可以找到所单击元素的数据周属性的方法。

$(document).ready(function(){
     $("td").on("click",function(){
         $td=$(this);
         $th = $td.closest('table').find('th').eq($td.index());
         alert($th.attr("data-week"));
     });    
});

Demo: https://jsfiddle.net/7b146hor/2/

演示：https：//jsfiddle.net/7b146hor/2/

#3

You need to find it by index. Get which child number the clicked element has and then look for same number in .weeks

你需要通过索引找到它。获取所单击元素的子编号，然后在.weeks中查找相同的编号

Demo

$('td').on('click', function(e){
  index = $(this).index();
  week  = $('.weeks').find(":eq("+index+")").attr('data-week');
  console.log(week);
});

#4

This worked for me

这对我有用

$('td').on('click', function(e) {
  index = $(this).index();
  week = $($('.week')[index - 1]).data('week');
  console.log('week', week);
});

jsfiddle example

jsfiddle的例子