Блог

Главная - Вопросы по программированию - Таблица сортировки с заголовком с помощью jQuery

Таблица сортировки с заголовком с помощью jQuery

#javascript #html #jquery #css #html-table

Вопрос:

Я создал 11 таблиц с именем таблицы, используя div. Я сортирую числовые строки всех таблиц.

Это работает, но я также хочу, чтобы имя таблицы было отсортировано в соответствии с сортировкой чисел. Если кто-нибудь знает, как это сделать, пожалуйста, помогите. Я привел здесь код 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>

Комментарии:

1. было бы лучше, если бы скрипка была доступна, и концепция была бы отличной.

2. @MuhammadAliDEV разве фрагмента недостаточно?

3. Можно ли изменить HTML-код? Было бы более разумно содержать как таблицу , так и ее заголовок в содержании div , или даже поместить заголовок внутри самой таблицы.

4. я пытаюсь разобраться с кодом.

Ответ №1:

Попробуйте завернуть стол и направиться внутрь 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>
Метки: