Блог

Главная - Вопросы по программированию - Отображение строк в таблице сначала с установленным флажком

Отображение строк в таблице сначала с установленным флажком

#javascript #jquery #html #checkbox #html-table

#javascript #jquery #HTML #флажок #html-таблица

Вопрос:

У меня таблица отображается с флажками в каждой строке следующим образом-

Таблица

Html-код: —

 <table>
     <tr>
        <td><input type= "checkbox"></td>
        <td>Name1</td>
        <td>Role1</td>
     </tr>
     <tr>
        <td><input type= "checkbox"></td>
        <td>Name2</td>
        <td>Role2</td>
     </tr>

     <tr>
        <td><input type= "checkbox"></td>
        <td>Name4</td>
        <td>Role4</td>
     </tr>
     <tr>
        <td><input type= "checkbox"></td>
        <td>Name3</td>
        <td>Role3</td>
     </tr>
</table>

У меня также есть кнопка «Сортировать». Когда я нажимаю на кнопку сортировки, все те строки, у которых установлены флажки, должны отображаться первыми, а все остальные строки после них. Результат будет выглядеть примерно так —

Таблица результатов

Как это можно реализовать?

Ответ №1:

Используя jquery, вы можете проанализировать каждый <tr> из них и проверить, установлен ли их дочерний флажок, а затем добавить их в новую таблицу в качестве первого или последнего дочернего элемента. затем замените старую таблицу новой.

 $(document).ready(function(){
    $('#sort').on('click', function(){
        var newTable = $('<table class="table"></table>');
         $('.table').find('tr').each(function($index, $value){
            if($(this).find('input[type=checkbox]').is(':checked')){
                newTable.prepend($(this));
            } else {
                newTable.append($(this));
            } 
         });
         $('.table').replaceWith(newTable);
    });
});

это должно сработать, но я еще не тестировал его.
Надеюсь, это поможет!

  • Сетевой адаптер

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

1. Привет! Спасибо за это. Я пытался это сделать, но это не сработало. Я не уверен, что .replaceWith способен это сделать. Пожалуйста, смотрите здесь — jsfiddle.net/vjwr6fxq

2. @Stringified Привет, да, вам нужен был jquery, и была небольшая ошибка, но я ее исправил, вот и все! jsfiddle.net/vjwr6fxq/10

Ответ №2:

Вы можете использовать sort() и is(':checked') для сортировки строк, а затем очистить таблицу и добавить отсортированное содержимое. ДЕМОНСТРАЦИЯ

 var sorted = $('table tr').sort(function(a, b) {
  if($(b).find('td:first-child input').is(':checked')) {
    return 1;
  } else {
    return -1;
  }
})

$('button').click(function() {
  $('table').empty().html(sorted);
})

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

1. поскольку таблица очищается, теряя в ней ссылку на tr, попытка нажать на кнопку не сортируется более одного раза, я думаю

2. @Nenand Привет! Пытался сделать это, но на самом деле атрибут ‘checked’ по умолчанию не имеет значения true при загрузке страницы, как в вашей демонстрации. Это работает для этого, но при нажатии кнопки это не так. Я думаю, что @nivendha прав. Но спасибо за это.

Ответ №3:

пожалуйста, попробуйте это

 $('input').each(function(e,i){
 if(!i.checked){
   var tr=$(i).closest('tr');
     $(tr).parent().append($(tr).remove());
    }
 });

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

1. Привет! Я пытался это сделать, похоже, это не работает. Пожалуйста, посмотрите здесь — jsfiddle.net/w3d2x271

2. извините, я не думаю, что это работает на jsfiddle, пожалуйста, смотрите codepen

3. О, это странно, да, я проверил, он работает в codepen. Большое спасибо.

Метки: