时间戳

首页 > 解决方案 > 如何使用属性从 javascript 获取表的同一行中 td 元素的类的名称

javascript - 如何使用属性从 javascript 获取表的同一行中 td 元素的类的名称

问题描述

我正在尝试获取分配给 html 表中 td 元素的类名的名称。我给了两个 tds 的类名，其余的 tds 没有类名。如果我单击复选框元素，我想获取仅在同一行中具有 data-pk="NormalHrs" 属性的 tds 的类名，

这是代码

<script>
    $("input:checkbox").on('click', function () {
                 var $box = $(this);
                var classname =   $box.parent('td').closest('td.data-pk="NormalHrs"').classname  

    })
</script>
   <td class="EditableTd"><a href="#" data-pk="NormalHrs" class="editable editable-click">0.00</a><input type="hidden" class="bros" data-val="true" data-val-number="The field NormalHrs must be a number." data-val-required="The NormalHrs field is required." id="attendanceLogList_0__NormalHrs" name="attendanceLogList[0].NormalHrs" value="0.00"></td>

 

<td class="holidaycheck"><input type="checkbox" value="true" data-tag="HolidayHrs" data-val="true" data-val-required="The IsHolidayMarked field is required." id="attendanceLogList_0__IsHolidayMarked" name="attendanceLogList[0].IsHolidayMarked" autocomplete="off"><input type="hidden" value="false" id="attendanceLogList_0__IsHolidayMarked" name="attendanceLogList[0].IsHolidayMarked"> </td>

强文本 任何帮助将不胜感激

标签： javascripthtmljquery

解决方案

假设您只知道单元格具有 data-pk="NormalHrs" 的内容并且您需要它的类名，试试这个

$("input:checkbox").on('click', function() {
  const className = $(this).closest('tr').find("[data-pk=NormalHrs]").closest("td").attr("class")
  console.log(className)
})

// OR

$("input:checkbox").on('click', function() {
  const className = $(this).closest('tr').find('td:has(".editable")').attr("class")
  console.log(className)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="EditableTd">
      <a href="#" data-pk="NormalHrs" class="editable editable-click">0.00</a>
      <input type="hidden" class="bros" data-val="true" data-val-number="The field NormalHrs must be a number." data-val-required="The NormalHrs field is required." id="attendanceLogList_0__NormalHrs" name="attendanceLogList[0].NormalHrs" value="0.00">
    </td>
    <td class="holidaycheck">
      <input type="checkbox" value="true" data-tag="HolidayHrs" data-val="true" data-val-required="The IsHolidayMarked field is required." id="attendanceLogList_0__IsHolidayMarked" name="attendanceLogList[0].IsHolidayMarked" autocomplete="off">
      <input type="hidden" value="false" id="attendanceLogList_0__IsHolidayMarked" name="attendanceLogList[0].IsHolidayMarked"> </td>
  </tr>
</table>

推荐阅读