Как изменить порядок расположения столбцов таблицы в jquery - PullRequest
Новая
       15

Как изменить порядок расположения столбцов таблицы в jquery

4 голосов
/ 24 марта 2019

У меня есть следующая таблица, и я хочу изменить порядок столбцов таблицы в соответствии со значением атрибута позиции <th> с помощью jquery после загрузки страницы.

Я посмотрел на следующие решения, но не смог решить мою проблему:

  1. Столбцы таблицы повторного заказа jQuery
  2. Переупорядочить столбцы таблицы?
  3. Изменить порядок столбцов таблицы 

<table>
    <head>
        <tr>
            <th position = "3">Email</th>
            <th position = "1">Name</th>
            <th position = "2">Phone</th>
        </tr>
    </head>
    <tbody>
        <tr>
            <td>Ali@gmail.com</td>
            <td>Hamid</td>
            <td>0776567432</td>
        </tr>
    </tbody>
</table>

Ожидаемый результат: enter image description here

1 Ответ

2 голосов
/ 24 марта 2019

Создание объекта из атрибутов позиции с использованием индекса <th> в качестве ключей.

Затем используйте этот объект в обратном вызове sort(), чтобы найти новый порядок для каждого элемента 

const colOrder = {}

$('thead th').each(function(i){
    colOrder[i] = parseInt( $(this).attr('position') );
});


$('tr').html(function(i){
    return $(this).children().sort(function(a,b){
       const aOrder = colOrder[$(a).index()],
            bOrder = colOrder[$(b).index()];
       return aOrder - bOrder;
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th position = "3">Email</th>
            <th position = "1">Name</th>
            <th position = "2">Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ali@gmail.com</td>
            <td>Hamid</td>
            <td>0776567432</td>
        </tr>
    </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...