CODEWITHSUNDEEP
jqueryhtml-tableclone
Adrian
Adrian

Reputation: 37

jQuery how to find/select multiple nth-childs

I want to clone the "#" and "Name" columns and append them in a certain div outside the table (while keeping the exact same structure with thead and 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>

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>

My current code doesn't seem to work (I managed only for the first column), but I can't make it work for more than the first column

$('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();

Upvotes: 0

Views: 520

Answers (2)

Manish Yadav
Manish Yadav

Reputation: 1025

Your way of giving multiple :nth-child selector in find() was wrong.

Try This:-

$(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>

Upvotes: 0

Rohit Sharma
Rohit Sharma

Reputation: 3334

As I could understand what you are trying to do, you can try this solution..!

$('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>

Upvotes: 1

Related Questions