Question

我有一张如下表

 <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td>Name 1</td>
                        <td>Red</td>
                    </tr>
                    <tr>
                        <td>Name 2</td>
                        <td>Blue</td>
                    </tr>
                    <tr>
                        <td>Name 3</td>
                        <td>Green</td>
                    </tr>
                    <tr>
                        <td>Name 4</td>
                        <td>Yellow</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

我想选择＆＃34;名称3＆＃34;。这该怎么做？我试过了

$('table table tr td ')

但它返回名称1。让我说我没有给任何人id。我知道我错过了一些非常愚蠢的东西！请帮帮我。

Answer 1

的jQuery

您希望根据父级子元素中的数字选择元素。使用:nth-child() CSS / jQuery API可以获得好运。

$('table table tr:nth-child(3) td');

我认为这是理想的！

另请注意，它是一个CSS元素选择器，jQuery使用所有CSS选择器来选择元素。

更准确地说，您只获得第一个td，您可以使用以下代码：

$('table table tr:nth-child(3) td:first-child');

http://api.jquery.com/nth-child-selector/（有关儿童选择的更多信息）

https://api.jquery.com/first-child-selector/（关于初选儿童的更多信息）

CSS

如果在CSS中使用相同的代码，您将获得相同的输出。

为什么呢？因为你在jQuery中使用的选择器在CSS中是完全相同的。您需要更改的是如何实现元素的属性。

祝你好运！

Answer 2

您可以选择内容like this：

$('table table tr td:contains(Name 3)')

或者您可以选择the third row specifically：

$('table table tr:nth-child(3) td')

or：

$('table table tr:eq(2) td');

Answer 3

处理此问题的最佳方法是为HTML中的各个元素提供某种标识符（例如，每行的唯一id值，第一个class的常见值{每行{1}}等。这种信息真正使jQuery选择器真正强大。

但是，如果仅限于使用您当前的代码，我可能会使用的选择器（以保证我得到了我想要的元素）将是：

<td>

我更喜欢这种风格（而不是＆＃34;单选择器＆＃34;方法），因为它往往更快，并且可以让您对选择的范围有更严格的控制。

如何在html表中选择3rd tr's td？

3 个答案:

的jQuery

CSS