专注于小 div 内表格的 <the> 内容答案

【问题标题】：Focus on <tr> content of a table inside a small div专注于小 div 内表格的 <the> 内容
【发布时间】：2018-01-23 04:53:49
【问题描述】：

我正在开发一个面板（使用 div），它将显示一个事件的多个发言人姓名。我创建了一个 HTML 表格，其中包含这些演讲者的姓名列表。此面板可能尺寸较小，发言者数量可能较多，因此表格可能无法完全显示。

我想在加载表格时使用 jQuery 显示包含类“disc”的 tr，因为它是标识当前正在说话的说话者的类。

这是我的一段代码：

<div class="panel">
<table class="table">
    <tbody>
        <tr class="row-1"><td>JOHN DOE</td></tr>
        ...
        ...
        <tr class="row-136 disc">
            <td>BOB DYLAN</td>
        </tr>
        ...
        ...
    </tbody>
</table>

【问题讨论】：

stackoverflow.com/questions/19012495/… 的可能副本——你可能想看看 jQuery 的 scrollTop()。
这是一个不同的问题。我没有这个元素的 ID（只有“disc”类），我不希望整个页面滚动到该行，只有表格本身。我是 jquery 的新手
它是唯一具有“disc”类的元素吗？出于好奇，您是否为此设置了小提琴，或者您正在使用一些扩展的 HTML？
当扬声器更改时，套接字会更新“面板”表。它当时只有 1 个扬声器。我没有任何小提琴因为它是更大系统的一部分。重要的代码在问题区域。对不起我的英语
我试过 $('html, body').animate({ scrollTop: $(".panel .disc").offset().top }, 2000);但它不起作用

标签： jquery html css html-table

【解决方案1】：

由于不仅要显示“desc”类行，还要在屏幕中间的某个位置显示它，因此我建议使用明确定义的变量构建一个小函数。 “重复答案”中的做法是单行，难以完善，难以维护。

这个功能应该比较清楚，

target = $(".disc");
lineHeight = target.height();
distanceFromTop = target.offset().top;
linesFromTop = 5;

$(window).scrollTop(distanceFromTop - (lineHeight * linesFromTop));

【讨论】：

【解决方案2】：

使用您在该链接中提供的表格，我更新了我的代码以适应。我所做的唯一真正的更改是创建表格display: inline-block;，删除内联高度样式并将其定义为规则，并更改我的 jQuery 代码中的选择器以适合您的表格。

$('.mz').animate({
  scrollTop: $(".disc").first().offset().top-50
}, 2000);

.table {
  display: inline-block;
  max-height: 200px;
  overflow-y: auto;
  padding: 0;
}

thead tr:first-child {
  background-color: #00f;
  color: #fff;
  position: absolute;
  top: 0;
  left: 8px;
  right: 25px;
  display: block;
  box-sizing: border-box;
}

thead tr:first-child th {
  display: inline-block;
  color: #fc0;
  margin-right: -2px;
  background: #55f;
  box-sizing: border-box;
}

td,
th {
  background: #aaa;
  width: 33%;
}

tbody tr:first-child td {
  padding-top: 10px;
}

table {
  width: 100%;
  margin: 0;
  border: 1px #f00 solid;
}
.disc {
  color: red;
}
.line-through td {
  text-decoration: line-through;
}
.row-title td {
  background-color: #33f;
  color: #99f;
}
.align-c {
  text-align: center;
}
td {
  height: 33px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table mz">
  <tbody>
    <tr class="row-title">
      <td colspan="3">PEQUENO EXPEDIENTE</td>
    </tr>
    <tr class="row-135 line-through">
      <td>1. DEPUTADA CANTORA MARA LIMA</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PT</td>
    </tr>
    <tr class="row-137 line-through">
      <td>2. DEPUTADA CLAUDIA PEREIRA</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PSC</td>
    </tr>
    <tr class="row-138 line-through">
      <td>3. DEPUTADA CRISTINA SILVESTRI</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PPS</td>
    </tr>
    <tr class="row-142 ">
      <td>4. DEPUTADO ADELINO RIBEIRO</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PSL</td>
    </tr>
    <tr class="row-143 ">
      <td>5. DEPUTADO ADEMAR TRAIANO</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PSDB</td>
    </tr>
    <tr class="row-144 ">
      <td>6. DEPUTADO ALEXANDRE CURI</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PMDB</td>
    </tr>
    <tr class="row-147 ">
      <td>7. DEPUTADO COBRA REPORTER</td>
      <td>PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PSC</td>
    </tr>
    <tr class="row-149 ">
      <td>8. DEPUTADO ALEXANDRE GUIMARAES</td>
      <td >PEQUENO EXPEDIENTE</td>
      <td width="70" class="align-c">PSC</td>
    </tr>
    <tr class="row-title">
      <td colspan="3">GRANDE EXPEDIENTE</td>
    </tr>
    <tr class="row-136 disc">
      <td style="height:33px">1. DEPUTADA CANTORA MARA LIMA</td>
      <td style="height:33px">GRANDE EXPEDIENTE</td>
      <td width="70" class="align-c" style="height:33px">PT</td>
    </tr>
    <tr class="row-139 line-through">
      <td style="height:33px">2. DEPUTADA CLAUDIA PEREIRA</td>
      <td style="height:33px">GRANDE EXPEDIENTE</td>
      <td width="70" class="align-c" style="height:33px">PSC</td>
    </tr>
    <tr class="row-145 line-through">
      <td style="height:33px">3. DEPUTADA CRISTINA SILVESTRI</td>
      <td style="height:33px">GRANDE EXPEDIENTE</td>
      <td width="70" class="align-c" style="height:33px">PPS</td>
    </tr>
    <tr class="row-title">
      <td colspan="3" style="height:33px;line-height:33px">HORÁRIO DAS LIDERANÇAS</td>
    </tr>
    <tr class="row-140 ">
      <td style="height:33px">1. DEPUTADA CLAUDIA PEREIRA</td>
      <td style="height:33px">HORÁRIO DAS LIDERANÇAS</td>
      <td width="70" class="align-c" style="height:33px">PSC</td>
    </tr>
    <tr class="row-146 line-through">
      <td style="height:33px">2. DEPUTADA CRISTINA SILVESTRI</td>
      <td style="height:33px">HORÁRIO DAS LIDERANÇAS</td>
      <td width="70" class="align-c" style="height:33px">PPS</td>
    </tr>
  </tbody>
</table>

【讨论】：

我的代码差不多就是这样。我试过了，但我无法读取未定义的属性“顶部”
您是否在offset() 之前添加了first()？没有看到某种代码，我真的不知道。
@aseolin，更新了上面的示例以适合您的代码。有几件事需要检查：表格是否以某种块格式（display: inline-block; 或其他东西）显示，其次，您是否在选择器中使用first()？我不知道您需要这样做，但如果它看到一个元素集合，则该集合将没有 top 属性。