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

Delete column contents in html table with loop

本文关键字：循环 删除 html      更新时间：2023-09-26

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

.JS： 

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

我该怎么做？

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

删除最后两列：

您可以调用以下代码，该代码删除最后一个子项的次数是要删除的列数的几倍：

$("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>

相关文章：