用循环删除html表中的列内容答案

【问题标题】：Delete column contents in html table with loop用循环删除html表中的列内容
【发布时间】：2017-04-14 05:39:53
【问题描述】：

我有一个 html 表，其中的行从循环中填充，我想从打印按钮上的单击事件中的所有行中删除最后两列：

JS：

$("#print").on('click', function(){  
     //I want to remove columns HERE
})

我该怎么做？

【问题讨论】：

jquery delete table column的可能重复
请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
我需要删除两列..来自循环的数据。我想删除列值
node.removeChild(node)，这可能是您可以在循环中使用来删除整个列，澄清您的问题...您是要删除列还是只想删除那些列中的数据? node.textContent = '',,,,,,,, 将删除单元格的数据
我要删除最后两列

标签： javascript html html-table

【解决方案1】：

我不确定这是否是您真正想要的（删除列或列内容），但您可以尝试以下建议。

删除最后两列：

您只需调用以下代码即可删除最后一个子项的数倍于您要删除的列数：

$("table").find("th:last-child, td:last-child").remove();

$("#print").on('click', function(){  
    var remove_cols_number =2;
    
    for(var i=0;i<remove_cols_number;i++){
    	$("table").find("th:last-child, td:last-child").remove();
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" border='1'>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th> 
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td> 
    <td>Bill</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
    <td>Gates</td>
    <td>1</td>
  </tr>
</table>
<br>
<button id='print' type="button">Print</button>

删除最后两列内容：

您可以获取列长度并删除一列，因为 eq() 使用从零开始的索引，然后使用 empty() 删除最后一列的内容和最后一列之前的内容 -1：

var columns_length = $("table th").length-1;

$("table tr").find("td:eq("+columns_length+"), td:eq("+(columns_length-1)+")").empty();

$("#print").on('click', function(){  
    var columns_length = $("table th").length-1;

    $("table tr").find("td:eq("+columns_length+"), td:eq("+(columns_length-1)+")").empty();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" border='1'>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th> 
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td> 
    <td>Bill</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
    <td>Gates</td>
    <td>1</td>
  </tr>
</table>
<br>
<button id='print' type="button">Print</button>

【讨论】：