Question

如何查找包含带有名称的输入元素的元素的表格单元格并对其应用属性。例如我有一张表格如下

<table>
  <tr><td><input name="someName" /></td></tr>
  <tr><td><input name="findThisElement"/></td></tr>
  <tr><td><input name="someName" /></td></tr>
</table>

我需要使用名为findThisElement

的input元素将border属性应用于td

<table>
  <tr><td><input name="someName" /></td></tr>
  <tr><td style="border:1px solid red;"><input name="findThisElement"/></td></tr>
  <tr><td><input name="someName" /></td></tr>
</table>

我想我必须使用以下语句来应用我需要的css但是我很难找到td

  $(td).attr('style', 'border:1px solid red');

Answer 1

$("table input[name='findThisElement']")

将该样式应用于该输入元素的父td

$("table input[name='findThisElement']").parent().css('border','1px solid red');

Answer 2

$("table") - 此代码将返回页面

上的所有表格

$("table td") - 此代码将返回表

中的所有单元格

$(table td input") - 此代码将返回表格

中单元格内的所有输入

$("table td input[name='someName']") - 此代码将返回名称为someName的所有输入，这些输入位于表格中的单元格内

您的问题的答案将是：$("table td input[name='someName']").closest('td').attr('style', 'border:1px solid red');

Answer 3

首先，您需要了解attribute selector。

考虑到这一点，你有两个选择。您可以在:has的单个查询中直接应用您的css：

$("td:has(input[name=findThisElement])").css('border','1px solid red');

或者您可以直接转到<input>并选择.closest() <td>：

$("td input[name=findThisElement").closest('td').css('border','1px solid red');

使用Jquery如何找到包含name属性的元素的表格单元格

3 个答案: