我有多个表是从wp中的循环生成的,并编写了jquery来删除具有空td的列,该表适用于第一个表,然后在所有其他表上添加相同的列。我试过将“每个”与jquery一起为每个表运行,但事实并非如此。
示例:
每个表都有1行,并且列数相同(7)。空列被隐藏,这适用于单个表。可以说表1有2个可见列,表2有3个可见列。第3列(来自表2)被添加到表1中,即使它为空。
这是我的jQuery
$(document).ready(function() {
$('.man-table').each(function (table) {
//count # of columns
var numCols = $("th", table).length;
for ( var i=1; i<=numCols; i++ ) {
var empty = true;
//grab all the <td>'s of the column at i
$("td:nth-child(" + i + ")", table).each(function(index, el) {
//check if the <span> of this <td> is empty
if ( $("span", el).text() != "" ) {
empty = false;
return false; //break out of each() early
}
});
if ( empty ) {
$("td:nth-child(" + i + ")", table).hide(); //hide <td>'s
$("th:nth-child(" + i + ")", table).hide(); //hide header <th>
}
}
})
});
这是我为每个循环生成的表
<table class='man-table'>
<thead>
<tr>
<th class='numeric'><span>inductance (r)</span></th>
<th class='numeric'><span>mount</span></th>
<th class='numeric'><span>dim (mm)</span></th>
<th class='numeric'><span>r current</span></th>
<th class='numeric'><span>impedance</span></th>
<th class='numeric'><span>capacitance</span></th>
<th class='numeric'><span>resistance</span></th>
<th class='numeric'><span>spec</span></th>
</tr>
</thead>
<tr>
<td data-title='inductance (r)' class='numeric'><span>{$ind}</span></td>
<td data-title='mount type' class='numeric'><span>{$mnt}</span></td>
<td data-title='dimensions' class='numeric'><span>{$dim}</span></td>
<td data-title='rated current' class='numeric'><span>{$rat}</span></td>
<td data-title='impedance' class='numeric'><span>{$imp}</span></td>
<td data-title='capacitance' class='numeric'><span>{$cap}</span></td>
<td data-title='resistance' class='numeric'><span>{$res}</span></td>
<td data-title='spec sheet' class='numeric'><span><a href='{$site_url}/product-spec/{$prod_pdf}' target='_blank;'><div id='spec-btn'>DOWNLOAD</div></a></span></td>
</tr>
</table>
答案 0 :(得分:0)
这是一个基本示例,可以处理许多表并标识“空”列。假设该表只有1行。
$(function() {
function findEmptyCol(t) {
var cols = [];
$("tbody td", t).each(function(i, c) {
if ($(c).text().trim() == "") {
cols.push($(c).index());
}
});
return cols;
}
function hideEmptyCol(tables) {
tables.each(function(i, t) {
var e = findEmptyCol(t);
if (e.length) {
$.each(e, function(k, v) {
$("th", t).eq(v).hide();
$("td", t).eq(v).hide();
});
}
});
}
hideEmptyCol($(".man-table"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Table 1</h3>
<table class='man-table' id="table-1">
<thead>
<tr>
<th class='numeric'><span>Col 1</span></th>
<th class='numeric'><span>Col 2</span></th>
<th class='numeric'><span>Col 3</span></th>
<th class='numeric'><span>Col 4</span></th>
<th class='numeric'><span>Col 5</span></th>
<th class='numeric'><span>Col 6</span></th>
<th class='numeric'><span>Col 7</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class='numeric'><span>1</span></td>
<td class='numeric'><span>2</span></td>
<td class='numeric'><span>3</span></td>
<td class='numeric'><span>4</span></td>
<td class='numeric'><span>5</span></td>
<td class='numeric'><span>6</span></td>
<td class='numeric'><span>7</span></td>
</tr>
</tbody>
</table>
<h3>Table 2</h3>
<table class='man-table' id="table-2">
<thead>
<tr>
<th class='numeric'><span>Col 1</span></th>
<th class='numeric'><span>Col 2</span></th>
<th class='numeric'><span>Col 3</span></th>
<th class='numeric'><span>Col 4</span></th>
<th class='numeric'><span>Col 5</span></th>
<th class='numeric'><span>Col 6</span></th>
<th class='numeric'><span>Col 7</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class='numeric'><span>1</span></td>
<td class='numeric'><span></span></td>
<td class='numeric'><span>3</span></td>
<td class='numeric'><span>4</span></td>
<td class='numeric'><span> </span></td>
<td class='numeric'><span>6</span></td>
<td class='numeric'><span>7</span></td>
</tr>
</tbody>
</table>
<h3>Table 3</h3>
<table class='man-table' id="table-3">
<thead>
<tr>
<th class='numeric'><span>Col 1</span></th>
<th class='numeric'><span>Col 2</span></th>
<th class='numeric'><span>Col 3</span></th>
<th class='numeric'><span>Col 4</span></th>
<th class='numeric'><span>Col 5</span></th>
<th class='numeric'><span>Col 6</span></th>
<th class='numeric'><span>Col 7</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class='numeric'><span>1</span></td>
<td class='numeric'><span>2</span></td>
<td class='numeric'><span>3</span></td>
<td class='numeric'><span>4</span></td>
<td class='numeric'><span>5</span></td>
<td class='numeric'><span> </span></td>
<td class='numeric'><span>7</span></td>
</tr>
</tbody>
</table>