按表类选择一个 td答案

【问题标题】：select a td by table class按表类选择一个 td
【发布时间】：2021-10-25 11:44:58
【问题描述】：

我已经在网上搜索了答案，但是

$(".classname tbody tr td") or $("table.classname tbody tr td")

不工作，我有一个只有一个类的表，我需要在tds 等上操作。

它不起作用的唯一原因可能是类的名称：table name name-surname。

html是这样的

<div class="tab">
  <table class="table name name-surname">
     <tbody>
        <tr>
          <td>name</td>
          <td>surname</td>
        </tr>
     </tbody>
  </table>
</div>

这是真正的问题还是我遗漏了什么？有办法绕过它吗？我无法添加 id 或更改课程名称

【问题讨论】：

标签： javascript html jquery css html-table

【解决方案1】：

你必须使用“。”对于所有类 [.table.name.name-surname] 和元素标签，只有它们的名称 [tbody td]
此外，您的 html 中没有 tr 元素。

console.log($(".table.name.name-surname tbody td"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="tab">
  <table class="table name name-surname">
    <tbody>
      <td>name</td>
      <td>surname</td>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案2】：

只需使用您的表类之一，例如 $(".table")，或者如果您想使用多个类，请通过 dot 连接它们，如下所示：$('.table.name.name-surname tbody tr td')

这是工作示例：

$(".table tbody tr td").each(function(itm,el) {
   console.log(el);
});

$('.table.name.name-surname tbody tr td').each(function(itm,el) {
   console.log(el);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
        <table class="table name name-surname">
            <tbody>
                <tr>
                    <td>name</td>
                    <td>surname</td>
                </tr>
            </tbody>
        </table>
    </div>

【讨论】：

对不起，我写错了 html，在实际代码中存在 trs
@userone 好的，我根据您的更新更新了我的答案。您可以像这样通过点链接类选择器：table.name.name-surname 或只使用其中之一：.table

【解决方案3】：

你总是可以把你的选择器写成.table.name.name-surname tbody tr td

$(".table.name.name-surname tbody tr td").each(function() {
  console.log($(this).html())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="tab">
  <table class="table name name-surname">
    <tbody>
      <td>name</td>
      <td>surname</td>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案4】：

为了让$(".classname tbody tr td") 或$("table.classname tbody tr td") 工作，tablw 应该有一个名为classname 的类

console.log($(".classname tbody tr td"));
console.log($("table.classname tbody tr td"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="tab">
  <table class="table name name-surname classname">
    <tbody>
      <td>name</td>
      <td>surname</td>
    </tbody>
  </table>
</div>

【讨论】：