使用jQuery ..隐藏html表中的Empty列不起作用:\ [英] Hiding Empty column in html table using jQuery .. doesn't work :\
问题描述
<html>
<head>
<script src="jquery-1.4.4.js"></script>
<script>
$('table').each(function(a, tbl) {
var currentTableRows = $(tbl).attr('rows').length - 1;
$(tbl).find('th').each(function(i) {
var remove = 0;
var currentTable = $(this).parents('table');
var tds = currentTable.find('tr td:nth-child(' + (i + 1) + ')');
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == currentTableRows) {
$(this).hide();
tds.hide();
}
});
});
</script>
</head>
<body>
<table border="1" >
<tr><td colspan="4" > alaa </td></tr>
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr ><td>1st</td><td>1.1</td><td></td><td></td></tr>
<tr class="data"><td>2nd</td><td>2.1</td><td></td><td></td></tr>
<tr class="data"><td>3rd</td><td>3.1</td><td></td><td>1</td></tr>
<tr class="data"><td>4th</td><td></td><td></td><td></td></tr>
<tr ><td></td><td></td><td></td><td></td></tr>
<tr class="data"><td></td><td></td><td></td><td></td></tr>
</table>
</body>
这是我的代码...我以为是库中的问题，所以我尝试了许多库，例如jQuery 1.4.4，1.5.2和其他
here is my code ... I thought that the problem from the library, so I tried many libraries such as jQuery 1.4.4 , 1.5.2 and others
这是测试，在这里可以正常工作 http://jsfiddle.net/nlovatt/JsLn8/
Here is the test and it works fine there http://jsfiddle.net/nlovatt/JsLn8/
但是在我的文件中..它不起作用..
but in my file .. it doesn't work ..
致谢
推荐答案
您的代码无法正常工作的原因有两个.
There are two reasons your code isn't working.
1)您正在加载HEAD后立即执行脚本，在此阶段，您的表不存在，因此不执行任何操作.要解决此问题，请确保在页面加载时执行它.
1) You're executing the script immediately upon loading of the HEAD, at this stage, your table doesn't exist and so it does nothing. To fix this, make sure you execute it on page load instead.
2)当您将列中的空白单元格数与表中的总行数 进行比较时，您会遗漏一个事实，即大多数列都没有与表格的行数相同(您的第一行只有一列宽).您需要比较实际列中的行数，或者做得更好，只需做相反的事情并检查非空列即可.
2) When you're comparing the number of blank cells in the column with the number of total rows in the table, you're missing the fact that most of your columns don't have the same number of rows as the table (your first row is only one column wide). You need to compare to the number of rows in the actual column, or better yet, just do the reverse thing and check for non-empty columns.
完整的代码将变为:
$(document).ready(function() {
$('table').each(function(a, tbl) {
$(tbl).find('th').each(function(i) {
var remove = true;
var currentTable = $(this).parents('table');
var tds = currentTable.find('tr td:nth-child(' + (i + 1) + ')');
tds.each(function(j) { if (this.innerHTML != '') remove = false; });
if (remove) {
$(this).hide();
tds.hide();
}
});
});
});
这篇关于使用jQuery ..隐藏html表中的Empty列不起作用:\的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
