使用 jQuery 对带有标题的表格进行排序

ppbb 发表于 Dev

ppbb

我使用 div 创建了 11 个带有表名的表。我正在对所有表的行数进行排序。

它有效，但我也希望表名应根据数字排序进行排序。如果有人知道如何做到这一点，请帮忙。我在这里给出了 HTML 和 jQuery 代码。提前致谢。

$('#alphBnt').on('click', function() {
  var sorting = $(".box").sort((a, b) => $(a).find(".number").text() - $(b).find(".number").text()).appendTo("#container")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>

<div id="container">
  <div class="head">Table 1</div>
  <table border=2px class="box">
    <tr>
      <td class="name">mui</td>
      <td class="number">4512</h2>
      </td>
    </tr>
  </table>

  <div class="head">Table 2</div>
  <table border=2px class="box">
    <tr>
      <td class="name">oinecellars</td>
      <td class="number">566</td>
    </tr>
  </table>

  <div class="head">Table 3</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">34566</td>
    </tr>
  </table>

  <div class="head">Table 4</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">1</td>
    </tr>
  </table>

  <div class="head">Table 5</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">1666</td>
    </tr>
  </table>

  <div class="head">Table 6</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">143</td>
    </tr>
  </table>

  <div class="head">Table 7</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">90</td>
    </tr>
  </table>

  <div class="head">Table 8</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">21</td>
    </tr>
  </table>

  <div class="head">Table 9</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">34</td>
    </tr>
  </table>

  <div class="head">Table 10</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">16</td>
    </tr>
  </table>

  <div class="head">Table 11</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">9000</td>
    </tr>
  </table>
</div>

用户863

尝试将表格和标题包裹在 div 中

$('#alphBnt').on('click', function() {
  var sorting = $(".box-panel").sort((a, b) => $(a).find(".number").text() - $(b).find(".number").text()).appendTo("#container")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>

<div id="container">
  <div class="box-panel">
    <div class="head">Table 1</div>
    <table border=2px class="box">
      <tr>
        <td class="name">mui</td>
        <td class="number">4512</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 2</div>
    <table border=2px class="box">
      <tr>
        <td class="name">oinecellars</td>
        <td class="number">566</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 3</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">34566</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 4</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">1</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 5</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">1666</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 6</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">143</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 7</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">90</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 8</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">21</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 9</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">34</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 10</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">16</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 11</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">9000</td>
      </tr>
    </table>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。