Хобрук: Ваш путь к мастерству в программировании

jQuery, как найти/выбрать несколько nth-child

Я хочу клонировать столбцы «#» и «Имя» и добавлять их в определенный div вне таблицы (сохраняя при этом ту же структуру с thead и tbody).

No   Name         Data1         Data2         Data3
1   John Doe     Some data     Some data     Some data
2   John Doe     Some data     Some data     Some data
3   John Doe     Some data     Some data     Some data

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Data1</th>
      <th>Data2</th>
      <th>Data3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
  </tbody>
</table>

Я хочу, чтобы это выглядело так:

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John Doe</td>
    </tr>
  </tbody>
</table>

Мой текущий код, похоже, не работает (мне удалось только для первого столбца), но я не могу заставить его работать больше, чем для первого столбца

$('table').clone().prependTo('.panel').find('th:not(:nth-child(1)), th:not(:nth-child(2)), td:not(:nth-child(1)), td:not(:nth-child(2))').remove();
jquery clone html-table
16.06.2017

Ответы:


1

Как я понял, что вы пытаетесь сделать, вы можете попробовать это решение..!

$('table').clone().prependTo('.panel').find('th:not(:nth-child(-n+2)), td:not(:nth-child(-n+2))').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Data1</th>
      <th>Data2</th>
      <th>Data3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
  </tbody>
</table>
<br /><br />

<div class="panel"></div>

16.06.2017
  • Это было идеально. Спасибо! 16.06.2017
  • Хорошо..! Рад, что это помогло. 16.06.2017

    • 2

    Ваш способ дать несколько селекторов :nth-child в find() был неправильным.

    Попробуйте это:-

    $(function(){

  $('.panel').html( $('#tab').clone());
  
  $('.panel').find('th:not(:nth-child(1),:nth-child(2)), td:not(:nth-child(1),:nth-child(2))').remove();

});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Data1</th>
      <th>Data2</th>
      <th>Data3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
  </tbody>
</table>
I want to make it look like this:

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John Doe</td>
    </tr>
  </tbody>
</table>
<strong>
<br><br>
Generated table here:-
</strong>
<div class="panel">
</div>

    16.06.2017
    Новые материалы
    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..
    Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
    LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..
    Структуры данных в C ++ - Часть 1
    Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..