如何使用Javascript / jQuery获取表格行中的第一个单元格？

Question

Let's say I have a simple table like this one:

<tbody>
<tr>
   <td> A </td>
   <td> B </td>
   <td> C </td>
   <td><input type="button"></td>
</tr>
<tr>
   <td> 1 </td>
   <td> 2 </td>
   <td> 3 </td>
   <td><input type="button"></td>
</tr>

What I'm trying to do is, when I click the button a function takes place which gets the first character in the first table row. So in row 1 that would be "A", in row 2 that would be "1". None of the rows or cells have unique ID's, so can't use those.

Right now I was trying to do something like:

charValue = $(this).parent()first().text();

But for some reason when I do that I get "ABC" and not just "A".

Thanks in advance!

Answer 1

Use find after closest("tr")

$(this).closest("tr").find("td").first().text();

Or alternatively td:first

$(this).closest("tr").find("td:first").text();

Answer 2

Simply use this code

$("input").click(function() {
  // Bad practice 
  //var charValue = $(this).parent().parent().children().first().text();

  //god practice
  var charValue = $(this).closest("tr").find("td:first").text();

  alert(charValue)
})