javascript 使用 jQuery 遍历并删除空的 HTML 表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5501908/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iterate through and delete empty HTML table rows with jQuery
提问by StephenDebs
I am attempting to iterate through a HTML table using jQuery and delete empty rows. The page is driven by ASP.NET and with certain permission, items in the table will be hidden. Therefore, I wanted to create this script to remove the empty rows and get rid of the space between the other items that are still displayed. I cannot seem to get what I currently have to run and I am unsure as to why. Here is the code:
我正在尝试使用 jQuery 遍历 HTML 表并删除空行。该页面由 ASP.NET 驱动，如果有一定的权限，表格中的项目将被隐藏。因此，我想创建这个脚本来删除空行并摆脱仍然显示的其他项目之间的空间。我似乎无法得到我目前必须运行的东西，我不确定为什么。这是代码：
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr').each(function () {
$(this).find('td').each(function () {
if ($(this).text().trim() == "") {
$(this).closest("tr").remove();
};
});
});
});
</script>
Any guidance would be greatly appreciated. Thanks!
任何指导将不胜感激。谢谢！
回答by Anne Porosoff
Your code appears to work just fine. Try running the following on its own to see what I mean:
您的代码似乎工作得很好。尝试单独运行以下命令以了解我的意思：
<html>
<head>
<title>jQuery Tests</title>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr').each(function () {
$(this).find('td').each(function () {
if ($(this).text().trim() == "") {
$(this).closest("tr").remove();
};
});
});
});
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td></td>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
<td> </td>
</tr>
</table>
</body>
Could there be something else on the page that might be conflicting?
页面上是否还有其他可能发生冲突的内容？
回答by Eng-Mohamed Abdulwahab
Lead to problem in case We have Only TD empty and all other TD is Filled
如果我们只有 TD 为空而所有其他 TD 已填充，则会导致问题
I'm change the Code to make this in its consideration
我正在更改代码以考虑到这一点
<script type="text/javascript">
$(document).ready(function () {
$('tr').each(function () {
var totalTDs = $(this).find('td').length;
var emptyTDS = 0;
$(this).find('td').each(function () {
if ($(this).text().trim() == "") {
emptyTDS += 1;
};
});
if (emptyTDS == totalTDs) {
$(this).remove();
}
});
});
</script>
回答by Mike Thomsen
Try this:
试试这个：
var td = $(this).find('td:empty');
if ( td.length > 0 ) $(this).remove();
http://api.jquery.com/empty-selector/
http://api.jquery.com/empty-selector/
That said, you really want to do this on the server side. It'll look ugly on the client side because you'll have the empty rows messing things up until the document ready event is fired.
也就是说，您确实想在服务器端执行此操作。它在客户端看起来很难看，因为在触发文档就绪事件之前，您会将空行弄得一团糟。
回答by Reporter
I think it is better to use the '.parent()' method, because a 'tr' tag is always the next parent from a 'td' tag.
我认为最好使用 '.parent()' 方法，因为 'tr' 标签总是来自 'td' 标签的下一个父标签。
