CODEWITHSUNDEEP
javascriptjqueryhtml
Deepak Sharma
Deepak Sharma

Reputation: 1137

Remove columns from table on given indexes javascript

In a function I need to pass a arr. I want to remove all columns of html table.

Not sure how to do this.

I tried this, but not working:

<table>
<thead>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>a1</td>
        <td>b1</td>
        <td>c1</td>
        <td>d1</td>
        <td>e1</td>
    </tr>
    <tr>
        <td>a2</td>
        <td>b2</td>
        <td>c2</td>
        <td>d2</td>
        <td>e2</td>
    </tr>
    <tr>
        <td>a3</td>
        <td>b3</td>
        <td>c3</td>
        <td>d3</td>
        <td>e3</td>
    </tr>
</tbody>
</table>

and in javascript I have a variable:

var arr=[0,2,3];

I want to remove all columns and its data from table on specified so output will be: 

<table>
<thead>
    <tr>            
        <td>b</td>
        <td>e</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>b1</td>
        <td>e1</td>
    </tr>
    <tr>
        <td>b2</td>
        <td>e2</td>
    </tr>
    <tr>
        <td>b3</td>
        <td>e3</td>
    </tr>
</tbody>
</table>

Upvotes: 3

Views: 419

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You can use the array to create a filter for tds to be deleted as given below

var arr = [0, 2, 3];

var filters = arr.map(function(val) {
  return 'td:nth-child(' + (val + 1) + ')';
});

$('table').find(filters.join()).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
      <td>e1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
      <td>c2</td>
      <td>d2</td>
      <td>e2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
      <td>c3</td>
      <td>d3</td>
      <td>e3</td>
    </tr>
  </tbody>

Upvotes: 2

Related Questions