使用jQuery删除html表中的空列
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jQuery删除html表中的空列相关的知识,希望对你有一定的参考价值。
我有一个看起来像这样的html表。单击按钮时,应删除空白列。在我的示例中,将删除列07:00,07:15,07:30、07:45、18:00、18:15当前,我的函数removeEmptyColumns()不起作用(不删除任何列) 。可能是因为空间吗? ()。必须对其进行修改以使其起作用?
https://jsfiddle.net/Smolo/d2nyefuL/
<button onclick="removeEmptyColumns()">Remove empty columns</button>
<table id="mytable" class="rg-table zebra" style="width: 1838px;" title="" summary=""><caption class="rg-header"><span id="rg-hed" class="rg-hed" title="ID: rg-hed">25.05.2020</span> <span id="abc" class="xyz" title=""></span></caption>
<thead>
<tr>
<th class=" " style="width: 96px;">First Column</th>
<th class=" " style="width: 10px;">07:00</th>
<th class=" " style="width: 46px;">07:15</th>
<th class=" " style="width: 46px;">07:30</th>
<th class=" " style="width: 46px;">07:45</th>
<th class=" " style="width: 46px;">08:00</th>
<th class=" " style="width: 46px;">08:15</th>
<th class=" " style="width: 46px;">08:30</th>
<th class=" " style="width: 46px;">08:45</th>
<th class=" " style="width: 46px;">09:00</th>
<th class=" " style="width: 46px;">09:15</th>
<th class=" " style="width: 46px;">09:30</th>
<th class=" " style="width: 46px;">09:45</th>
<th class=" " style="width: 46px;">10:00</th>
<th class=" " style="width: 46px;">10:15</th>
<th class=" " style="width: 46px;">10:30</th>
<th class=" " style="width: 46px;">10:45</th>
<th class=" " style="width: 46px;">11:00</th>
<th class=" " style="width: 46px;">11:15</th>
<th class=" " style="width: 46px;">11:30</th>
<th class=" " style="width: 46px;">11:45</th>
<th class=" " style="width: 46px;">12:00</th>
<th class=" " style="width: 46px;">12:15</th>
<th class=" " style="width: 46px;">12:30</th>
<th class=" " style="width: 46px;">12:45</th>
<th class=" " style="width: 46px;">13:00</th>
<th class=" " style="width: 46px;">13:15</th>
<th class=" " style="width: 46px;">13:30</th>
<th class=" " style="width: 46px;">13:45</th>
<th class=" " style="width: 46px;">14:00</th>
<th class=" " style="width: 46px;">14:15</th>
<th class=" " style="width: 46px;">14:45</th>
<th class=" " style="width: 46px;">17:45</th>
<th class=" " style="width: 46px;">18:00</th>
<th class=" " style="width: 46px;">18:15</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class=" " style="background-color: #ffffff; width: 96px;">a</td>
<td class=" " style="width: 10px;" data-title="07:00"> </td>
<td class=" " style="width: 46px;" data-title="07:15"> </td>
<td class=" " style="width: 46px;" data-title="07:30"> </td>
<td class=" " style="width: 46px;" data-title="07:45"> </td>
<td class=" " style="width: 46px;" data-title="08:00"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:00">abc</td>
<td class=" " style="width: 46px;" data-title="10:15"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:15">abc</td>
<td class=" " style="width: 46px;" data-title="12:30"> </td>
<td class=" " style="width: 46px;" data-title="12:45"> </td>
<td class=" " style="width: 46px;" data-title="13:00"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="17:45">abc</td>
<td class=" " style="width: 46px;" data-title="20:30"> </td>
<td class=" " style="width: 46px;" data-title="20:45"> </td>
</tr>
<tr class="">
<td class=" " style="background-color: #ffffff; width: 96px;">b</td>
<td class=" " style="width: 10px;" data-title="07:00"> </td>
<td class=" " style="width: 46px;" data-title="07:15"> </td>
<td class=" " style="width: 46px;" data-title="07:30"> </td>
<td class=" " style="width: 46px;" data-title="07:45"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:15">abc</td>
<td class=" " style="width: 46px;" data-title="09:30"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:30">abc</td>
<td class=" " style="width: 46px;" data-title="11:45"> </td>
<td class=" " style="width: 46px;" data-title="12:00"> </td>
<td class=" " style="width: 46px;" data-title="12:15"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:15">abc</td>
<td class=" " style="width: 46px;" data-title="14:45"> </td>
<td class=" " style="width: 46px;" data-title="17:45"> </td>
<td class=" " style="width: 46px;" data-title="20:30"> </td>
<td class=" " style="width: 46px;" data-title="20:45"> </td>
</tr>
<tr class="">
<td class=" " style="background-color: #ffffff; width: 96px;">c</td>
<td class=" " style="width: 10px;" data-title="07:00"> </td>
<td class=" " style="width: 46px;" data-title="07:15"> </td>
<td class=" " style="width: 46px;" data-title="07:30"> </td>
<td class=" " style="width: 46px;" data-title="07:45"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:30">abc</td>
<td class=" " style="width: 46px;" data-title="09:45"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:15">abc</td>
<td class=" " style="width: 46px;" data-title="12:30"> </td>
<td class=" " style="width: 46px;" data-title="12:45"> </td>
<td class=" " style="width: 46px;" data-title="13:00"> </td>
<td class=" " style="width: 46px;" data-title="13:15"> </td>
<td class=" " style="width: 46px;" data-title="13:30"> </td>
<td class=" " style="width: 46px;" data-title="13:45"> </td>
<td class=" " style="width: 46px;" data-title="14:00"> </td>
<td class=" " style="width: 46px;" data-title="14:15"> </td>
<td class=" " style="width: 46px;" data-title="14:45"> </td>
<td class=" " style="width: 46px;" data-title="17:45"> </td>
<td class=" " style="width: 46px;" data-title="20:30"> </td>
<td class=" " style="width: 46px;" data-title="20:45"> </td>
</tr>
</tbody>
</table>
JS函数:
function removeEmptyColumns()
$('#mytable tr th').each(function(i)
//select all td in this column
var tds = $(this).parents('table')
.find('tr td:nth-child(' + (i + 1) + ')');
//check if all the cells in this column are empty
if(tds.length == tds.filter(':empty').length)
//hide header
$(this).hide();
//hide cells
tds.hide();
);
答案
这里是一种通过修剪空白删除所有内容的方法。
function removeEmptyColumns()
$('#mytable tr th').each(function(i)
//select all td in this column
var tds = $(this).parents('table')
.find(`tr td:nth-child($i + 1)`);
//check if all the cells in this column are empty
if (tds.toArray().every((td) =>
// Empty strings return 'false' - trim whitespace before.
return !td.textContent.trim()
))
//hide header
$(this).hide();
//hide cells
tds.hide();
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="removeEmptyColumns()">Remove empty columns</button>
<table id="mytable" class="rg-table zebra" style="width: 1838px;" title="" summary="">
<caption class="rg-header"><span id="rg-hed" class="rg-hed" title="ID: rg-hed">25.05.2020</span> <span id="abc" class="xyz" title=""></span></caption>
<thead>
<tr>
<th class=" " style="width: 96px;">First Column</th>
<th class=" " style="width: 10px;">07:00</th>
<th class=" " style="width: 46px;">07:15</th>
<th class=" " style="width: 46px;">07:30</th>
<th class=" " style="width: 46px;">07:45</th>
<th class=" " style="width: 46px;">08:00</th>
<th class=" " style="width: 46px;">08:15</th>
<th class=" " style="width: 46px;">08:30</th>
<th class=" " style="width: 46px;">08:45</th>
<th class=" " style="width: 46px;">09:00</th>
<th class=" " style="width: 46px;">09:15</th>
<th class=" " style="width: 46px;">09:30</th>
<th class=" " style="width: 46px;">09:45</th>
<th class=" " style="width: 46px;">10:00</th>
<th class=" " style="width: 46px;">10:15</th>
<th class=" " style="width: 46px;">10:30</th>
<th class=" " style="width: 46px;">10:45</th>
<th class=" " style="width: 46px;">11:00</th>
<th class=" " style="width: 46px;">11:15</th>
<th class=" " style="width: 46px;">11:30</th>
<th class=" " style="width: 46px;">11:45</th>
<th class=" " style="width: 46px;">12:00</th>
<th class=" " style="width: 46px;">12:15</th>
<th class=" " style="width: 46px;">12:30</th>
<th class=" " style="width: 46px;">12:45</th>
<th class=" " style="width: 46px;">13:00</th>
<th class=" " style="width: 46px;">13:15</th>
<th class=" " style="width: 46px;">13:30</th>
<th class=" " style="width: 46px;">13:45</th>
<th class=" " style="width: 46px;">14:00</th>
<th class=" " style="width: 46px;">14:15</th>
<th class=" " style="width: 46px;">14:45</th>
<th class=" " style="width: 46px;">17:45</th>
<th class=" " style="width: 46px;">18:00</th>
<th class=" " style="width: 46px;">18:15</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class=" " style="background-color: #ffffff; width: 96px;">a</td>
<td class=" " style="width: 10px;" data-title="07:00"> </td>
<td class=" " style="width: 46px;" data-title="07:15"> </td>
<td class=" " style="width: 46px;" data-title="07:30"> </td>
<td class=" " style="width: 46px;" data-title="07:45"> </td>
<td class=" " style="width: 46px;" data-title="08:00"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:00">abc</td>
<td class=" " style="width: 46px;" data-title="10:15"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:15">abc</td>
<td class=" " style="width: 46px;" data-title="12:30"> </td>
<td class=" " style="width: 46px;" data-title="12:45"> </td>
<td class=" " style="width: 46px;" data-title="13:00"> </td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="17:45">abc</td>
<td class=" " style="width: 46px;" data-title="20:30"> </td>
<td class=" " style="width: 46px;" data-title="20:45"> </td>
</tr>
<tr class="">
<td class=" " style="background-color: #ffffff; width: 96px;">b</td>
<td class=" " style="width: 10px;" data-title="07:00"> </td>
<td class=" " style="width: 46px;" data-title="07:15"> </td>
<td class=" " styl以上是关于使用jQuery删除html表中的空列的主要内容,如果未能解决你的问题,请参考以下文章