时间戳

首页 > 解决方案 > 使用 css 选择器从所有行中选择第一个 td

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

问题描述

这是我的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 ，但它会引发错误。

有人可以帮忙吗？

标签： htmlcsscss-selectors

解决方案

要实现您想要的，您需要将您正在使用的选择器更改为：table[id='mytable'] tr td:first-child. 这将选择td每个IDtr中的第一个tablemytable

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

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

希望这可以帮助！

推荐阅读