选择时如何使选定的行 go 到表格顶部

Question

I am just interested on moving the selected row to the top of the table when the checkbox is checked当复选框被选中时，我只是对将所选行移动到表格顶部感兴趣

the only thing that I achieved was moving the checkbox to the top of the table, but when i unchecked the check boxes they stayed at the top我唯一实现的就是将复选框移到表格的顶部，但是当我取消选中复选框时，它们停留在顶部

this is the code in just one file, the javascript code is at the very bottom of the file这只是一个文件中的代码，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

You are looking for.prependTo您正在寻找.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