Удалить все строки в таблице, кроме одной, сохранив заголовок таблицы - PullRequest
Новая
       5

Удалить все строки в таблице, кроме одной, сохранив заголовок таблицы

0 голосов
/ 24 января 2020

У меня есть боковая панель со списком атрибутов certian, которые равны type и display_label после нажатия любого из этих двух атрибутов. Я хочу, чтобы таблица была пустой, за исключением строки, которая соответствует вышеупомянутым атрибутам.

Я могу получить идентификатор строки таблицы, которая должна быть сохранена, я хочу, чтобы все остальные записи были удалены при сохранении заголовка таблицы, текущее решение удаляет все строки таблицы, включая заголовок, или сохраняет строку это не связано. 

<div class="row">
  <div class="pull-left col-4">
    <ol>
        <li><a href="#" onclick="show_type_specific(1)">Type</a></li>
        <li><a href="#" onclick="show_type_specific(2)">Type 2</a></li>
    </ol>
    <ol>
        <li><a href="#" onclick="show_display_specific(1)">Display label</a></li>
        <li><a href="#" onclick="show_display_specific(2)">Display label 2</a></li>
    </ol>
  </div>
  <table class="table">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>something</td>
    </tr>
    <tr>
        <td>2</td>
        <td>something else</td>
    </tr>
  </table>
</div>

<script>
    function show_type_specific(id){
        $(".table").find(`tr:eq(${id})`).remove();    
     }

    function show_display_specific(id){
        $(".table").find(`tr:eq(${id})`).remove();    
      }

</script>

Ответы [ 3 ]

4 голосов
/ 24 января 2020

Было бы проще, если бы таблица была правильно разбита на разделы, используя thead и tbody: 

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>something</td>
    </tr>
    <tr>
        <td>2</td>
        <td>something else</td>
    </tr>
  </tbody>
</table>

Тогда было бы: 

$("table.table > tbody > tr").remove();

Или, если вам нужно сохранить строку данных, которая идентифицируется текстом в первом столбце: 

$("table.table > tbody > tr").filter(function() {
    return $(this.firstElementChild).text().trim() != idToKeep;
}).remove();

Live Пример: 

setTimeout(function() {
    var idToKeep = 2;
    $("table.table > tbody > tr").filter(function() {
        return $(this.firstElementChild).text().trim() != idToKeep;
    }).remove();
}, 800);
<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>something</td>
    </tr>
    <tr>
        <td>2</td>
        <td>something else</td>
    </tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Тем не менее, вам придется освободить первый ряд: 

$("table.table tr:not(:first-child)").remove();

Или, если вам нужно сохранить строка данных, идентифицируемая по тексту в первом столбце и исключающая первую строку: 

$("table.table tr").filter(function(index) {
    return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
}).remove();


setTimeout(function() {
    var idToKeep = 2;
    $("table.table tr").filter(function(index) {
        return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
    }).remove();
}, 800);
<table class="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
      <td>1</td>
      <td>something</td>
  </tr>
  <tr>
      <td>2</td>
      <td>something else</td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Вам может быть интересно, почему я использовал комбинатор-потомок (пробел), а не дочерний комбинатор (>) в этом, когда я использовал детский комбинатор в предыдущем. Причина в том, что браузер автоматически обернет ваши строки в элемент tbody. Так что это также будет работать: 

$("table.table > tbody > tr:not(:first-child)").remove();

Или если вам нужно сохранить строку данных, которая идентифицируется текстом в первом столбце, и исключить первую строку: 

$("table.table > tbody > tr").filter(function(index) {
    return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
}).remove();


setTimeout(function() {
    var idToKeep = 2;
    $("table.table > tbody > tr").filter(function(index) {
        return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
    }).remove();
}, 800);
<table class="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
      <td>1</td>
      <td>something</td>
  </tr>
  <tr>
      <td>2</td>
      <td>something else</td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0 голосов
/ 30 января 2020

На вопрос уже был дан ответ, но я решил использовать это в качестве решения 

<script type="text/javascript">
    function show_display_specific(){
        var table = $(".table tbody");

        table.find('tr').each(function (i) {
            var $tds = $(this).find('td'),
                input_val = $tds.eq(0).text(),
                ouput_val = $tds.eq(1).text(),
                display_label = $tds.eq(2).text();
            if (display_label == idToKeep){
                // $tds.attr("hidden", false);
                console.log("this works can you belive it ", display_label);
            }else{
                // $tds.attr("hidden", true);
            }
        });
        $("#form-div").attr("hidden", false);
    }
</script>
0 голосов
/ 24 января 2020

как насчет использования атрибутов данных? запустите фрагмент ниже. 

$('ol>li>a').click( (e) =>  $('.table tr').filter(`[data-type=${$(e.target).data('type')}]`).remove());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col-4">
    <ol>
        <li><a href="#" data-type="1">Type</a></li>
        <li><a href="#" data-type="2">Type 2</a></li>
    </ol>
    <ol>
        <li><a href="#" data-type="1">Display label</a></li>
        <li><a href="#" data-type="2">Display label 2</a></li>
    </ol>
  </div>
  <div>
  <table class="table">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr data-type="1">
        <td>1</td>
        <td>something</td>
    </tr>
    <tr data-type="2">
        <td>2</td>
        <td>something else</td>
    </tr>
  </table>
    </div>
</div>
...