使用jquery按列名删除表列

Question

如何使用jquery按列名删除表格列？我已经有代码，使用index：

删除表中的列

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

但现在我需要按列名删除表格。

Answer 1

我创建了一个关于如何操作的代码段。

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.com/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>

Answer 2

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;
});

工作示例

http://fiddle.jshell.net/juLcze3j/

Answer 3

向与该列关联的每个单元格添加数据属性（您也可以使用此方法删除行 - 只需添加data-row属性）。此示例允许您单击列标题，该列将被删除。

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

Answer 4

以下内容基于所点击的项目的索引，TD或TH。尝试点击td或th中的任意一个，相应的列将被删除。

我还从列名称创建了select，并使用button删除了所选列。

随意询问您是否想要不同的内容或相应地调整代码。

//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.com/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" />

希望有所帮助。