Question

这是我的html

<table id="mytable" >
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>1888</td>
            <td>Michael</td>
        </tr>

        <tr>
            <td>1886</td>
            <td>Bosco</td>
        </tr>

        <tr>
            <td>955</td>
            <td>Raj</td>
        </tr>
    </tbody>
</table>

我要从所有行中选择第一个td

所以输出将是1888、1886、955

我尝试了这个table[id='mytable'] tr:nth-child 但是会引发错误。

有人可以帮忙吗？

Answer 1

要实现所需的功能，需要将使用的选择器更改为：table[id='mytable'] tr td:first-child。这将选择td中ID为tr的每个table中的第一个mytable

代码段中的代码只是如何应用它的一个示例

$(document).ready(function() {
  $("table[id='mytable'] tr td:first-child").css({'background-color':'pink'});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" >
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>1888</td>
            <td>Michael</td>
        </tr>

        <tr>
            <td>1886</td>
            <td>Bosco</td>
        </tr>

        <tr>
            <td>955</td>
            <td>Raj</td>
        </tr>
    </tbody>
</table>

希望这会有所帮助！

Answer 2

您应在first-child个元素上使用td选择器：

#mytable td:first-child {
  background: red;
}

使用css选择器从所有行中选择第一个td

2 个答案: