Arturo Andrés Órdenes Barraza
Reputation: 69
in a form, select the second table and the first tr
In a form, I want to select the second table and the first tr, and I wish to know if there are more than 1 way to do this with the selectors of jQuery. I mean combination of selectors.
<form action="#" method="POST">
<table class="table beauty-table table-hover">
<thead>
<tr>
<th>Nombre</th>
</tr>
</thead>
<tbody>
<tr>
<td class="beauty-hover">
<input type="text" value="" placeholder="Nombre">
</td>
</tr>
<tr>
<td>
<h4>Crear Campo</h4>
<!--<input class="enviar" type="submit" value="Crear">-->
</td>
</tr>
</tbody>
</table>
<table id="columnas" class="table beauty-table table-hover">
<thead>
<tr>
<th>Nombre</th>
<th>tipo</th>
<th>longitud</th>
<th>predeterminado</th>
<th>indice</th>
<th>null</th>
<th>A_I</th>
</tr>
</thead>
<tbody>
<tr>
<td class="beauty-hover">
<input type="text" value="" placeholder="Nombre">
</td>
<td class="">
<select class="form-control">
<option>Texto</option>
<option>Numerico</option>
<option>Booleano</option>
<option>Porcentaje</option>
<option>$</option>
</select>
</td>
<td class="">
<input type="text" value="" placeholder="Longitud">
</td>
<td class="">
<select class="form-control">
<option>NINGUNO</option>
<option>LLAVE FORANEA</option>
<option>LLAVE PRIMARIA</option>
</select>
</td>
<td class="">
<label>
<div class="checkbox">
<input type="checkbox"></input>
<i class="fa fa-square-o"></i>
</label>
</div>
</td>
<td class="">
<div class="checkbox">
<label>
<input type="checkbox"></input>
<i class="fa fa-square-o"></i>
</label>
</div>
</td>
<td class="">
<div class="checkbox">
<label>
<input type="checkbox"></input>
<i class="fa fa-square-o"></i>
</label>
</div>
</td>
</tr>
<tr id="crear">
<td></td>
<td></td>
<td>
<button id="crearb" class="enviar" type="button" value="Crear">Crear</button>
</td>
</tr>
</tbody>
</table>
</form>
Upvotes: 0
Views: 226
Answers (3)
ShankarSangoli
Reputation: 69915
You can do it using various selectors as follows.
As per your html, you have a id for second table to you can use id selector to target the second table which is the simplest and fastest.
$('#columnas tbody tr:first');
Next you can use :eq() selector which reduces the set of matched elements to the one at the specified index.
$('form table:eq(1) tbody tr:first')
Next you can use :nth-child() selector which selects all elements that are the nth-child of their parent and as per your html it will select the second table.
$('form table:nth-child(2) tbody tr:first')
Note: tr:first will select the first tr.
Upvotes: 1
AmmarCSE
Reputation: 30587
First one that pops to mind, :eq()
$('form table:eq(1) tr:eq(0)')
$('form table:eq(1) tr:eq(0)').css('background', 'green');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<form action="#" method="POST">
<table class="table beauty-table table-hover">
<thead>
<tr>
<th>Nombre</th>
</tr>
</thead>
<tbody>
<tr>
<td class="beauty-hover"><input type="text" value="" placeholder="Nombre"></td>
</tr>
<tr>
<td><h4>Crear Campo</h4><!--<input class="enviar" type="submit" value="Crear">--></td>
</tr>
</tbody>
</table>
<table id="columnas" class="table beauty-table table-hover">
<thead>
<tr>
<th>Nombre</th>
<th>tipo</th>
<th>longitud</th>
<th>predeterminado</th>
<th>indice</th>
<th>null</th>
<th>A_I</th>
</tr>
</thead>
<tbody>
<tr>
<td class="beauty-hover"><input type="text" value="" placeholder="Nombre"></td>
<td class=""><select class="form-control">
<option>Texto</option>
<option>Numerico</option>
<option>Booleano</option>
<option>Porcentaje</option>
<option>$</option>
</select></td>
<td class=""><input type="text" value="" placeholder="Longitud"></td>
<td class=""><select class="form-control">
<option>NINGUNO</option>
<option>LLAVE FORANEA</option>
<option>LLAVE PRIMARIA</option>
</select></td>
<td class=""> <label> <div class="checkbox">
<input type="checkbox"/>
</div></label>
</td>
<td class=""><div class="checkbox">
<input type="checkbox"></input>
<i class="fa fa-square-o"></i>
</div>
</td>
<td class=""><div class="checkbox">
<label>
<input type="checkbox"></input>
<i class="fa fa-square-o"></i>
</div> </label>
</td>
</tr>
</table>
</form>The next one is :not()
$('form table:not(:first) tr:first')
$('form table:not(:first) tr:first').css('background', 'green');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<form action="#" method="POST">
<table class="table beauty-table table-hover">
<thead>
<tr>
<th>Nombre</th>
</tr>
</thead>
<tbody>
<tr>
<td class="beauty-hover"><input type="text" value="" placeholder="Nombre"></td>
</tr>
<tr>
<td><h4>Crear Campo</h4><!--<input class="enviar" type="submit" value="Crear">--></td>
</tr>
</tbody>
</table>
<table id="columnas" class="table beauty-table table-hover">
<thead>
<tr>
<th>Nombre</th>
<th>tipo</th>
<th>longitud</th>
<th>predeterminado</th>
<th>indice</th>
<th>null</th>
<th>A_I</th>
</tr>
</thead>
<tbody>
<tr>
<td class="beauty-hover"><input type="text" value="" placeholder="Nombre"></td>
<td class=""><select class="form-control">
<option>Texto</option>
<option>Numerico</option>
<option>Booleano</option>
<option>Porcentaje</option>
<option>$</option>
</select></td>
<td class=""><input type="text" value="" placeholder="Longitud"></td>
<td class=""><select class="form-control">
<option>NINGUNO</option>
<option>LLAVE FORANEA</option>
<option>LLAVE PRIMARIA</option>
</select></td>
<td class=""> <label> <div class="checkbox">
<input type="checkbox"/>
</div></label>
</td>
<td class=""><div class="checkbox">
<input type="checkbox"></input>
<i class="fa fa-square-o"></i>
</div>
</td>
<td class=""><div class="checkbox">
<label>
<input type="checkbox"></input>
<i class="fa fa-square-o"></i>
</div> </label>
</td>
</tr>
</table>
</form>Finally, :last (works because you have only two tables)
$('form table:last tr:first')
$('form table:last tr:first').css('background', 'green');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<form action="#" method="POST">
<table class="table beauty-table table-hover">
<thead>
<tr>
<th>Nombre</th>
</tr>
</thead>
<tbody>
<tr>
<td class="beauty-hover"><input type="text" value="" placeholder="Nombre"></td>
</tr>
<tr>
<td><h4>Crear Campo</h4><!--<input class="enviar" type="submit" value="Crear">--></td>
</tr>
</tbody>
</table>
<table id="columnas" class="table beauty-table table-hover">
<thead>
<tr>
<th>Nombre</th>
<th>tipo</th>
<th>longitud</th>
<th>predeterminado</th>
<th>indice</th>
<th>null</th>
<th>A_I</th>
</tr>
</thead>
<tbody>
<tr>
<td class="beauty-hover"><input type="text" value="" placeholder="Nombre"></td>
<td class=""><select class="form-control">
<option>Texto</option>
<option>Numerico</option>
<option>Booleano</option>
<option>Porcentaje</option>
<option>$</option>
</select></td>
<td class=""><input type="text" value="" placeholder="Longitud"></td>
<td class=""><select class="form-control">
<option>NINGUNO</option>
<option>LLAVE FORANEA</option>
<option>LLAVE PRIMARIA</option>
</select></td>
<td class=""> <label> <div class="checkbox">
<input type="checkbox"/>
</div></label>
</td>
<td class=""><div class="checkbox">
<input type="checkbox"></input>
<i class="fa fa-square-o"></i>
</div>
</td>
<td class=""><div class="checkbox">
<label>
<input type="checkbox"></input>
<i class="fa fa-square-o"></i>
</div> </label>
</td>
</tr>
</table>
</form>Upvotes: 1
PeterKA
Reputation: 24638
You would use:
var tr = $('form table:eq(1) tr').first(); //OR
var tr = $('form table:eq(1) tr:eq(0)'); //OR
var tr = $('form').find('table').eq(1).find('tr').first();
Upvotes: 1
Related Questions
- How to select tr sibling and input on table
- jQuery Select first and second td
- Select data from two table row (tr)
- Same button for 2 tables selection jquery
- How do I select two separate inputs in each tr using jQuery?
- Jquery selecting values from on table while in another table
- How to select second table structure under a div?
- Select appropriate tr in table - jquery
- select specific tr and specific td within selected tr
- How to select second table using jquery