使用jQuery通过属性获取td元素值失败的技术求助

你可以使用jQuery的属性选择器精准定位目标TD元素，替代原来的索引方式。以下是修改后的代码及常见失败原因排查：

修改后的JavaScript代码 #

$(document).on("click", ".add", function() {
  // 获取当前按钮所在的行
  var currentRow = $(this).closest("tr");
  
  // 通过data-label属性获取对应TD的文本值
  var colId = currentRow.find('td[data-label="Id"]').text();
  var colAmount = currentRow.find('td[data-label="Amount"]').text();
  var colBuyer = currentRow.find('td[data-label="Buyer"]').text();
  
  // 也可通过ID属性直接定位（针对带id="qwe"的TD）
  var colBuyerById = currentRow.find('td#qwe').text();
  
  alert(colBuyer); // 测试输出Buyer对应的值
});

对应的HTML结构（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<tr>
  <td data-label="Id">Item ID</td>
  <td data-label="Amount">Amount</td>
  <td data-label="Buyer" id="qwe">Buyer</td>
  <td data-label="Items">Items</td>
  <td data-label="Email">Email</td>
  <td data-label="Actions">
    <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">ADD</i></a>
    <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">edit</i></a>
    <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">delete</i></a> 
  </td>
</tr>

常见失败原因排查 #

• 属性选择器语法错误：必须遵循[属性名="属性值"]格式，属性值的引号不能省略（尤其当值包含空格或特殊字符时）
• 属性名/值拼写错误：比如把data-label误写为datalabel，或者属性值大小写不匹配（jQuery选择器默认区分大小写）
• 父元素定位失效：确认currentRow正确获取到了按钮所在的<tr>，可通过console.log(currentRow)验证元素是否存在

内容的提问来源于stack exchange，提问作者RH Xihad