在窗体中，选择第二个表和第一个 TR

Question

在一个表单中，我想选择第二个表和第一个tr，我想知道是否有不止一种方法可以使用jQuery的选择器来做到这一点。我的意思是选择器的组合。

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

$('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>

下一个是：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>

最后，：last（有效，因为你只有两个表）

$('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>

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（） 选择器，它选择属于其父级的第 n 个子元素的所有元素，并且根据您的 html，它将选择第二个表。

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

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