Question

我有一张任意高度的桌子。这些行由javascript动态填充。当添加新行时，我不希望表超过其高度。表格顶部添加了新行，应从表格底部删除旧行。

有没有办法检测行是否有溢出？

对于插图行 f，g，h，i 应该被删除。

＆＃13;

.cnt {
    width: 100vw;
    height: 50vh;
    max-width: 100vw;
    max-height: 50vh;
    text-align: center;
    border: 1px solid black;
}
section {
  height: 100%
}
table {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;  
  overflow: hidden;
}
table tbody tr td{
  margin: 0;
  padding: 0; 
}

＆＃13;

<html>
  <body>
    <div class="cnt">
      <section>
        <table>
          <tbody>
            <tr><td>a</td></tr>
            <tr><td>b</td></tr>
            <tr><td>c</td></tr>
            <tr><td>d</td></tr>
            <tr><td>e</td></tr>
            <tr><td>f</td></tr>
            <tr><td>g</td></tr>
            <tr><td>i</td></tr>
          </tbody>
        </table>
      </section>
    </div>
  </body>
</html>

＆＃13;

Answer 1

添加行时，每次计算所有行的汇总高度，并删除冗余行。

clear();

function clear() {
  const table = document.querySelector('table');
  let sum = 0;
  let i = 0;
  while (i < table.rows.length) {
    let h = table.rows[i].clientHeight;
    if (sum + h > table.clientHeight) {
      table.deleteRow(i);
    } else {
      sum += h;
      i++;
    } 
  }
}

.cnt {
  height: 50vh;
  border: 1px solid black;
}

section {
  height: 100%;
}

table {
  display: block;
  height: 100%;
}

<html>
  <body>
    <div class="cnt">
      <section>
        <table>
          <tbody>
            <tr><td>a</td></tr>
            <tr><td>b</td></tr>
            <tr><td>c</td></tr>
            <tr><td>d</td></tr>
            <tr><td>e</td></tr>
            <tr><td>f</td></tr>
            <tr><td>g</td></tr>
            <tr><td>i</td></tr>
          </tbody>
        </table>
      </section>
    </div>
  </body>
</html>

Answer 2

您可以将tbdoy的高度与table的高度进行比较。

/// not overflowing
console.log($('table').outerHeight());
console.log($('table tbody').outerHeight());

.cnt {
  width: 100vw;
  height: 50vh;
  max-width: 100vw;
  max-height: 50vh;
  text-align: center;
  border: 1px solid black;
}

section {
  height: 100%
}

table {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

table tbody tr td {
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div class="cnt">
    <section>
      <table>
        <tbody>
          <tr>
            <td>a</td>
          </tr>
          <tr>
            <td>i</td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</body>

</html>

/// overflowing
console.log($('table').outerHeight());
console.log($('table tbody').outerHeight());

.cnt {
  width: 100vw;
  height: 50vh;
  max-width: 100vw;
  max-height: 50vh;
  text-align: center;
  border: 1px solid black;
}

section {
  height: 100%
}

table {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

table tbody tr td {
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div class="cnt">
    <section>
      <table>
        <tbody>
          <tr>
            <td>a</td>
          </tr>
          <tr>
            <td>b</td>
          </tr>
          <tr>
            <td>e</td>
          </tr>
          <tr>
            <td>f</td>
          </tr>
          <tr>
            <td>a</td>
          </tr>
          <tr>
            <td>b</td>
          </tr>
          <tr>
            <td>e</td>
          </tr>
          <tr>
            <td>f</td>
          </tr>
          <tr>
            <td>g</td>
          </tr>
          <tr>
            <td>i</td>
          </tr>
          <tr>
            <td>i</td>
          </tr>
          <tr>
            <td>i</td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</body>

</html>

检测表

2 个答案: