選擇時如何使選定的行 go 到表格頂部

Question

當復選框被選中時，我只是對將所選行移動到表格頂部感興趣

我唯一實現的就是將復選框移到表格的頂部，但是當我取消選中復選框時，它們停留在頂部

這只是一個文件中的代碼，javascript 代碼在文件的最底部

    <!DOCTYPE html>
    <html>

    <head>
      <title>HTML Table Row Up And Down</title>
      <meta charset="windows-1252">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        table {
          border: 1px solid black;
          border-collapse: collapse;
        }

        #table {
          list-style-type: none;
          margin: 0;
          padding: 0;
          width: 60%;
        }

        #table tr {
          margin: 3px;
          padding: 0.4em;
          font-size: 1.4em;
          height: 18px;
        }

        thead tr th {
          background-color: #66e9ff;
          font-size: 20px;
          border: 2px solid black;
          border-collapse: collapse;
        }

        tbody td {
          min-width: 100px;
          border: 1px solid black;
        }

        tbody td:first-child {
          text-align: center;
        }

        tbody tr.checked td {
          background-color: #ffbbbb;
          color: dark;
        }

        tbody tr:hover {
          background-color: yellow;
        }

        #feedback {
          font-size: 1.4em;
        }

        table .ui-selecting {
          background: #FECA40;
        }

        table .ui-selected {
          background: #928bff;
          color: white;
        }
      </style>
    </head>

    <body>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <table id="Table">
        <thead>
          <tr>
            <th><input type="checkbox" class="check_all" value="Check All"></th>
            <th>Header 1</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox"></td>
            <td>Label 1</td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>Label 2</td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>Label 3</td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>Label 4</td>
          </tr>
        </tbody>
      </table>

      <button>&ShortUpArrow;</button>
      <button>&ShortDownArrow;</button>

      <script>
        $(function() {

          function setCheck(o, c) {
            o.prop("checked", c);
            if (c) {
              //The closest() method returns the first ancestor of the selected element.
              o.closest("tr").addClass("checked");
            } else {
              o.closest("tr").removeClass("checked");
            }
          }

          $("tbody tr").on("click", function(e) {
            var chk = $("[type='checkbox']", this);
            setCheck(chk, !$(this).hasClass("checked"));

//moved the checkboxes to the top------------------------        
//        var $tbody = $("table");
//        $tbody.prepend( $tbody.find(chk) );
          });
        });

      </script>
    </body>

    </ht

ml>

Answer 1

您正在尋找.prependTo

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $("td").click(function () { $(this).parent().prependTo("#mytable"); }); </script> <table id="mytable"> <tr> <td>row 1</td> </tr> <tr> <td>row 2</td> </tr> <tr> <td>row 3</td> </tr> </table>

選擇時如何使選定的行 go 到表格頂部

問題描述

1 個解決方案

解決方案1
1 2019-09-20 18:37:19

選擇時如何使選定的行 go 到表格頂部

問題描述

1 個解決方案

解決方案1 1 2019-09-20 18:37:19

解決方案1
1 2019-09-20 18:37:19