admin管理员组

文章数量:1357374

How to remove table column by column name using jquery? I have already code, to remove column in table by using index:

$("" + tblNat + " tr").find('td:eq(1),th:eq(1)').remove();`

But now I need to remove table column by column name.

How to remove table column by column name using jquery? I have already code, to remove column in table by using index:

$("" + tblNat + " tr").find('td:eq(1),th:eq(1)').remove();`

But now I need to remove table column by column name.

• javascript
• jquery

Share Improve this question Follow edited Jun 18, 2015 at 10:06 Cerbrus 73k1919 gold badges136136 silver badges150150 bronze badges asked Jun 18, 2015 at 10:04 Ranjith prasadRanjith prasad 11111 gold badge22 silver badges66 bronze badges 3

• Also add HTML code – Tushar Commented Jun 18, 2015 at 10:04
• Add the column name as a data attribute to each of its associated cells and target that attribute. – Andy Commented Jun 18, 2015 at 10:08
• As Andy says, then you can write like var index = $(target).index() to get the index in tr – fuyushimoya Commented Jun 18, 2015 at 10:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I created a snippet about how to do it.

function remove(str) {
  // Get target th with the name you want to remove.
  var target = $('table').find('th[data-name="' + str +'"]');
  // Find its index among other ths 
  var index = (target).index();
  // For each tr, remove all th and td that match the index.
   $('table tr').find('th:eq(' + index + '),td:eq(' + index + ')' ).remove();
}
remove('A');

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
   <tr>
      <th data-name="A">A</th>
     <th data-name="B">B</th>
     <th data-name="C">C</th>
     <th data-name="D">D</th>
  </tr>
   <tr>
      <td>1</td>
     <td> 2</td>
     <td> 3</td>
     <td> 4</td>
  </tr>
   <tr>
      <td>1</td>
     <td> 2</td>
     <td> 3</td>
     <td> 4</td>
  </tr>
  </table>

Add a data attribute to each cell associated with that column (you can use this method to remove rows too - just add a data-row attribute). This example allows you to click on the column heading and the column will be removed.

HTML

<table>
    <thead>
        <th>one</th>
        <th>two</th>
        <th>three</th>
        <th>four</th>
    </thead>
    <tbody>
        <tr><td data-col="one">1</td><td data-col="two">2</td></tr>
        <tr><td data-col="one">1</td><td data-col="two">2</td></tr>
    </tbody>
</table>

JS

$('th').on('click', function () {
  var id = $(this).html();
  $(this).remove();
  $('[data-col="' + id + '"]').remove();
});

DEMO

HTML

<table>
    <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
    </tr>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
    </tr>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
    </tr>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
    </tr>
</table>

Javascript

var col_name = "Col2"; //hide all cell in col 2.

$("table tr:eq(0) td").each(function(i){

    //search in each header td the name of col 
    if($(this).text() !== "Col2") return;

    //if match
    $("table tr > td:nth-child("+(i+1)+")").hide();
    return false;
});

working example

http://fiddle.jshell/juLcze3j/

The following works based on the index of the clicked item, be it TD or TH. Try clicking on any of the td or th and the corresponding column will be removed.

I have also created a select from the column names and a button to remove the selected column.

Feel free to ask if you wanted something different or adapt the code accordingly.

//Remove when clicked on any TD or TH
var $table = $('table').on("click", "th, td", function() {
    
    var $this = $(this);
    var index = $this.index();
    if ( $this[0].tagName === "TD" ) {
        $table.find("th").eq(index).remove();
    } else {
        $this.remove();
    }
    $table.find("tr").each(function() {
        $(this).find("td").eq(index).remove();
    });
});

//Remove based on button click
var $ths = $("th").map(function() {
    return "<option>" + $.trim($(this).text()) + "</option>"
}).get();
var $select = $("select").append($ths.join(""));

$(":button").on("click", function() {
    var $option = $select.find(":selected");
    var selected = $option.text();
    $option.remove();
    if ($select.is(':empty')) {
        $select.remove();
        $(this).remove();
    }
    $table.find("th:contains('" + selected + "')").click();
});

td, th { cursor: pointer; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
    </thead>
    <tbody>
        <tr><td>Name1</td><td>Age1</td><td>City1</td><td>Country1</td></tr>
        <tr><td>Name2</td><td>Age1</td><td>City1</td><td>Country1</td></tr>
        <tr><td>Name3</td><td>Age1</td><td>City1</td><td>Country1</td></tr>
        <tr><td>Name4</td><td>Age1</td><td>City1</td><td>Country1</td></tr>
        <tr><td>Name5</td><td>Age1</td><td>City1</td><td>Country1</td></tr>
    </tbody>
</table>

<br/><br/>
<select></select>&nbsp;<input type="button" value="Remove Selected" />

Hope that helps.

本文标签： javascriptremove table column by column name using jqueryStack Overflow