色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何將選定的行凍結在可滾動表格的頂部？

CSS
錢斌斌2年前7瀏覽0評論

我有一個有很多行的表，我需要能夠凍結選定的行，以便當我滾動時它停留在表的頂部。我已經嘗試使用CSS，但我似乎不能讓它工作。

window.addEventListener('DOMContentLoaded', function() {
      var tableContainer = document.querySelector('.table-container');
      var table = tableContainer.querySelector('table');
      var selectedRows = table.querySelectorAll('tr.selected');

      tableContainer.addEventListener('scroll', function() {
        var topOffset = 0;
        selectedRows.forEach(function(row) {
          row.style.top = topOffset + 'px';
          topOffset += row.offsetHeight;
        });
      });
    });

.table-container {
      height: 200px; /*some pixels*/
      overflow: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    .selected {
      position: sticky;
      top: 0;
      background-color: lightyellow;
    }

    table tr:hover {
      background-color: lightgray;
    }

    table tr {
      border-top: 1px solid transparent; 
    }

# # #也許它有點粗糙，但似乎像你描述的那樣工作。訣竅是有兩個表，一個用于固定的行，另一個用于未固定的行，當一行被單擊時，它移動到另一個表，并且還將sticky定位在固定的行表上

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
  #container {
    height: 300px;
    width: 525px;
    overflow: scroll;
  }

  #pinned {
    position: sticky;
    top: 0;
    background: pink;
  }

  #pinned tr:last-child td,
  #pinned th {
    border-bottom: none;
  }

  table {
    border-collapse: collapse;
    width: 500px;
  }

  table thead th {
    padding: 3px;
    background: rgb(146, 220, 255);
  }

  table td,
  table th {
    border: 1px solid black;
    padding: 3px;
    width: 100px;
  }
</style>
  </head>
  <body>
<div id="container">
  <table id="pinned">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <table id="notPinned">
    <tbody>
      <tr>
        <td>Paul</td>
        <td>78</td>
      </tr>
      <tr>
        <td>Name 0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Name 1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Name 2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Name 3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Name 4</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Name 5</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Name 6</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Name 7</td>
        <td>7</td>
      </tr>
      <tr>
        <td>Name 8</td>
        <td>8</td>
      </tr>
      <tr>
        <td>Name 9</td>
        <td>9</td>
      </tr>
      <tr>
        <td>Name 10</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Name 11</td>
        <td>11</td>
      </tr>
      <tr>
        <td>Name 12</td>
        <td>12</td>
      </tr>
      <tr>
        <td>Name 13</td>
        <td>13</td>
      </tr>
      <tr>
        <td>Name 14</td>
        <td>14</td>
      </tr>
      <tr>
        <td>Name 15</td>
        <td>15</td>
      </tr>
      <tr>
        <td>Name 16</td>
        <td>16</td>
      </tr>
      <tr>
        <td>Name 17</td>
        <td>17</td>
      </tr>
      <tr>
        <td>Name 18</td>
        <td>18</td>
      </tr>
      <tr>
        <td>Name 19</td>
        <td>19</td>
      </tr>
      <tr>
        <td>Name 20</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Name 21</td>
        <td>21</td>
      </tr>
      <tr>
        <td>Name 22</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Name 23</td>
        <td>23</td>
      </tr>
      <tr>
        <td>Name 24</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Name 25</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Name 26</td>
        <td>26</td>
      </tr>
      <tr>
        <td>Name 27</td>
        <td>27</td>
      </tr>
      <tr>
        <td>Name 28</td>
        <td>28</td>
      </tr>
      <tr>
        <td>Name 29</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Name 30</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Name 31</td>
        <td>31</td>
      </tr>
      <tr>
        <td>Name 32</td>
        <td>32</td>
      </tr>
      <tr>
        <td>Name 33</td>
        <td>33</td>
      </tr>
      <tr>
        <td>Name 34</td>
        <td>34</td>
      </tr>
      <tr>
        <td>Name 35</td>
        <td>35</td>
      </tr>
      <tr>
        <td>Name 36</td>
        <td>36</td>
      </tr>
      <tr>
        <td>Name 37</td>
        <td>37</td>
      </tr>
      <tr>
        <td>Name 38</td>
        <td>38</td>
      </tr>
      <tr>
        <td>Name 39</td>
        <td>39</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
  const pinnedRows = document.querySelector("#pinned tbody");
  const notPinnedRows = document.querySelector("#notPinned tbody");

  document.querySelector("#notPinned tbody").addEventListener("click", (e) => {
    const rowCopy = e.target.parentElement.cloneNode(true);
    pinnedRows.prepend(rowCopy);
    e.target.parentElement.remove();
  });

  document.querySelector("#pinned tbody").addEventListener("click", (e) => {
    const rowCopy = e.target.parentElement.cloneNode(true);
    notPinnedRows.prepend(rowCopy);
    e.target.parentElement.remove();
  });
</script>
  </body>
</html>