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

Question

How can I find a table cell which contains an element with an input element with a name and apply an attribute to it. eg I have a table as below

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

I need to apply border attribute to the td with input element with the name findThisElement

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

I guess I have to use the following statement to apply the css I require but I m struggling to find the 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") - this code will return all tables on page

$("table td") - this code will return all cells that are in table

$(table td input") - this code will return all inputs that are inside cell in table

$("table td input[name='someName']") - this code will return all inputs with name someName that are inside cell in table

And answer for your question will be : $("table td input[name='someName']").closest('td').attr('style', 'border:1px solid red');

Answer 3

First of all, you need to know about attribute selector .

With that in mind, you have 2 options. You can you in a single query the :has and directly apply your css right after :

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

Or you can directly go to the <input> and select the .closest() <td> :

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