在表单中，选择第二个表和第一个tr

Question

像tittle说的那样。在一个表单中，选择第二个表和第一个tr ...我想知道使用jquery的选择器是否有多于1种方法。我的意思是组合选择器。 THX！

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

Answer 1

首先想到的是， :eq()

$('form table:eq(1) tr:eq(0)')

＆＃13;

＆＃13;

$('form table:eq(1) tr:eq(0)').css('background', 'green');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

下一个是 :not()

$('form table:not(:first) tr:first')

＆＃13;

＆＃13;

$('form table:not(:first) tr:first').css('background', 'green');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

最后， :last （因为你只有两张桌子，所以有效）

$('form table:last tr:first')

＆＃13;

＆＃13;

$('form table:last tr:first').css('background', 'green');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你会使用：

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();

Answer 3

您可以使用各种选择器进行以下操作。

根据你的html，你有第二个表id，你可以使用id选择器来定位最简单和最快的第二个表。

$('#columnas tbody tr:first');

接下来，您可以使用:eq()选择器将匹配元素集合减少到指定索引处的元素。

$('form table:eq(1) tbody tr:first')

接下来，你可以使用:nth-child()选择器选择所有父元素的nth-child元素，根据你的html选择第二个表格。

$('form table:nth-child(2) tbody tr:first')

注意：tr:first会选择第一个tr。