CODEWITHSUNDEEP
jqueryhtml
URL87
URL87

Reputation: 11012

How to select <input> wrapped in <tr>?

Suppose there are multiple <input type=text> wrapped in <td> wrapped in <tr> - 

for (var i = 1; i <= 8; i++) {
    $("tbody").append("<tr><td><input type=text></td><td><input type=text></td></tr>");
}

How to select all <input type=text> for specific <tr> ?

For example - chose all <input type=text> for the 4nd row .

Upvotes: 0

Views: 639

Answers (6)

Hamatti
Hamatti

Reputation: 1220

Depending on how you want to access your tr, you can use for example $('tr:first input') which chooses the inputs in first row. Or use some classes $('tr.wanted input') and so on.

After your edit, for the 4th row $('tr:nth-child(4) input')

Upvotes: 1

Kasper Ziemianek
Kasper Ziemianek

Reputation: 1349

The jQuery selector returns you a set of dom element's matching your selector. You can access 4nd row simply by :

$('tbody tr input').eq(3)

FIDDLE

Upvotes: 0

wirey00
wirey00

Reputation: 33661

There's many options on how to select a specific row.. you can use .eq() - which get's the element at that index for the collection which your selector gets - it's 0 indexed

$('#yourtable tbody tr:eq(3) input[type=text]')

Using :nth-child which is 1 indexed

$('#yourtable tbody tr:nth-child(4) input[type=text]')

Upvotes: 0

Nis
Nis

Reputation: 1477

var allinputs = $('tr').eq(3).find('input[type=text]') ;

This allinputs will have all your inputs with type text. To change the row change the number 3 . Remember: it is 0 based index.

Upvotes: 0

Bess
Bess

Reputation: 476

If you're using jQuery you should be able to just use nth-child.

$("li:nth-child(4) input").addClass("newClass");

or in your CSS

li:nth-child(4) input {
   background-color: red;
}

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16359

There are several ways to do this, but the first one that comes to mind:

var $fourthInput = $('tbody').find('tr').eq(3).find('input[type="text"]');

Steps:

  1. Start with parent
  2. Find items you want to find the nth instance of
  3. Apply .eq() for n-1 (e.g., fourth instance = .eq(3))
  4. Find the inputs within that instance

This is obviously super generic, but should give you a good starting point.

EDIT

Just to call out, since others are using the :nth-child selector. Per the jQuery documentation for :nth-child():

The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.

This means that the :nth-child() selector will also work for what you want, just so long as there are no other children types prior to the tr you want (it will search for the fourth child that is also a tr, not the fourth tr that is a child). The use of the above .find() combined with .eq() limits your result set to the types you want, and the child number of those types, regardless of other siblings.

Upvotes: 3

Related Questions