Javascript 使用jquery按列名删除表列

如何使用

jquery

按列名删除表列？我已经编写了使用索引删除表中列的代码：

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

---

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

我创建了一个关于如何删除的代码段

函数删除（str）{
//使用要删除的名称获取目标th。
var target=$（'table'）.find（'th[data name=“”+str+'”）；
//找到它的索引
var index=（target.index（）；
//对于每个tr，删除与索引匹配的所有th和td。
$（'table tr'）.find（'th:eq（'+index+'）、td:eq（'+index+'））.remove（）；
}
删除（“A”）

A.
B
C
D
1.
2.
3.
4.
1.
2.
3.
4.
HTML
工作示例
向与该列关联的每个单元格添加一个数据属性（您也可以使用此方法删除行-只需添加一个
数据行
属性）。此示例允许您单击列标题，列将被删除

HTML

以下工作基于单击项目的索引，无论是
TD
还是
TH
。尝试单击任何一个
td
或
th
，相应的列将被删除

我还从列名中创建了一个
select
，并创建了一个
按钮来删除所选列

请随时询问您是否需要一些不同的东西或相应地修改代码


//单击任何TD或TH时删除
var$table=$（'table'）。在（“单击”，“th，td”，函数（）上）{
var$this=$（this）；
var index=$this.index（）；
如果（$this[0]。标记名==“TD”）{
$table.find（“th”）.eq（index.remove（）；
}否则{
$this.remove（）；
}
$table.find（“tr”）.each（函数（）{
$（this.find（“td”）.eq（index.remove（）；
});
});
//基于按钮单击删除
var$ths=$（“th”）.map（函数（）{
返回“+$.trim（$（this）.text（））+”
}).get（）；
变量$select=$（“select”）.append（$ths.join（“”））；
$（“：按钮”）。在（“单击”，函数（）{
var$option=$select.find（“：selected”）；
所选变量=$option.text（）；
$option.remove（）；
如果（$select.is（':empty'））{
$select.remove（）；
$（this.remove（）；
}
$table.find（“th:contains（“+”selected+“）”）”）。单击（）；
});
td，th{cursor:pointer；}

名称
年龄
城市
国家
名称1地理1城市1国家1
名称2地理1城市1国家1
名称3地理1城市1国家1
姓名4年龄1城市1国家1
姓名5年龄1城市1国家1



还要添加
HTML
code将列名作为数据属性添加到每个相关单元格中，并将该属性作为目标。正如Andy所说，然后您可以像
var index=$（target）.index（）那样编写
要在
tr
中获取索引，这是最清晰的答案-除了非常明显的语法错误，我corrected@showdev
$（'table'）
和
$（'table tr'）
应该是和
$（'table'）
和
$（'table tr'）
@kev
没有“table”的ID。啊，我没有注意到，我的坏朋友
<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>

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

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

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