How can I get the name of the class of the td element in the same row of a table using attribute, from javascript

Question

I am trying to get the name of the classname assigned to the td element in an html table. I have given the class name for two tds and rest of the tds without class name. If I click checkbox element, I want to get the class name of that tds having data-pk="NormalHrs" attribute only in the same row,

Here is the code

<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>

strong text Any help would be appreciated

This is NOT an ASP Issue. Please change the snippet to have RENDERED HTML and Script ONLY - NO ASP! — mplungjan, Feb 18 '21 at 10:29
The selector you used in `closest` makes no sense. If you don’t know how attribute selectors work, then why don’t you just go and read up on it? https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors — CBroe, Feb 18 '21 at 10:29
This is a followup of [this question](https://stackoverflow.com/questions/66255367/how-can-i-find-the-checkbox-element-in-the-same-td-element-using-its-class-name) but incorrectly implemented — mplungjan, Feb 18 '21 at 10:30
it's [className](https://www.w3schools.com/jsref/prop_html_classname.asp) not `classname` — Scriptkiddy1337, Feb 18 '21 at 10:32
@RenéDatenschutz it's attr("class") in jQuery or [0].className — mplungjan, Feb 18 '21 at 10:42
Does this answer your question? [Get the contents of a table row with a button click](https://stackoverflow.com/questions/14460421/get-the-contents-of-a-table-row-with-a-button-click) — Don't Panic, Feb 18 '21 at 11:16

mplungjan · Accepted Answer · 2021-02-18T11:06:17.797

0

Assuming you only know the cell has something with data-pk="NormalHrs" and you need its className, try this

$("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>

edited Feb 18 '21 at 11:06

answered Feb 18 '21 at 10:32

mplungjan

169,008
28
173
236

I given as you advised me , But it shows different class name. var classname = $(this).closest('tr').find("[data-pk=NormalHrs]").attr("class"); – polachan paily Feb 18 '21 at 10:46
I repeat my request for the THIRD TIME: Please post a RENDERED PAGE with HTML and tell us EXACTLY what you need the classname of WHICH ELEMENT for when clicking WHICH CHECKBOX!!! – mplungjan Feb 18 '21 at 10:50
There are NO TDs with data-pk class like you are asking.., only ONE "A" tag with a DATA ATTRIBUTE of data-pk – mplungjan Feb 18 '21 at 10:51
I have given rendered html after running. the class name is giving 'editable editable-click'. I want to get EditableTd – polachan paily Feb 18 '21 at 11:02
@polachanpaily See update. Why do you need that className? – mplungjan Feb 18 '21 at 11:06
I need to provide some condition depends the class name . If class name = 'EditableTd then else another condition. At the moment after giving the advised command it gives anchor tag class name not closest td class name – polachan paily Feb 18 '21 at 11:16

How can I get the name of the class of the td element in the same row of a table using attribute, from javascript

1 Answers1