Question

我正在使用一个面板（使用div）来显示一个事件的几个发言者名称。我创建了一个HTML表，其中包含这些发言者的名字列表。此面板尺寸较小，扬声器数量可能较大，因此表格可能无法完全显示。

我想使用jQuery来显示包含类＆＃39; disc＆＃39;当表被加载时，因为它是识别当前发言者的类。

这是我的一段代码：

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

Answer 1

因为重要的是不仅要展示＆＃34; desc＆＃34;类行，但也要在屏幕中间的某处显示它，我建议使用显式定义的变量构建一个小函数。重复答案的方法＆＃34;是单线，很难完美，难以维护。

这个功能应该更清楚，

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

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

Answer 2

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

专注于一个小div内的表的内容

2 个答案: