我正在尝试使用 JavaScript 隐藏一堆表格行。 我认为我的大部分代码都是正确的,我只是不知道为什么它没有运行隐藏。
感谢任何帮助。
代码是:
<script type="text/javascript">
function hideButton()
{
$("#showHideButton").on("click", function (e) {
var button = e.target;
var node = $(button).parent().parent().next();
while (!node.hasClass("service-header")) {
if ($(node).is(":visible")) {
$(node).hide();
} else {
$(node).show();
}
node = node.next();
}
})}
</script>
HTML 是:
for (loopHere)
{
echo "<tr class='service-header'><th>InfoHere</th><th>" . InfoHere . "<button style='float:right' type='button' id='showHideButton' class='btn btn-default' onclick='hideButton()'><span class='dashicons dashicons-arrow-down-alt2'></span></button></th></tr>";
echo "<tr><td>More Stuff</td></tr>";
echo "<tr><td>More Stuff</td></tr>";
}
loop
我不知道为什么它不会隐藏点击时的行,我已经在具有类服务 header 的多行表上对其进行了测试,但没有任何运气。
最佳答案
根据您的要求引用下面的代码,我在下面创建了示例。希望它能解决您的问题
$(document).on("click", ".showHideButton",function () {
debugger;
//console.log("this="+this+" && $(this)="+$(this));
if($(this).parent().parent().hasClass("service-header") && $(this).parent().parent().is(":visible")){
$(this).parent().parent().hide();
}
else{
$(this).parent().parent().show();
}
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<table border="1">
<tr class="service-header">
<td>1 (has class)</td>
<td>1 (has class)</td>
<td><button type='button' class='showHideButton btn btn-default'>show/hide</button></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td><button type='button' class='showHideButton btn btn-default'>show/hide</button></td>
</tr>
<tr class="service-header">
<td>3 (has class)</td>
<td>3 (has class)</td>
<td><button type='button' class='showHideButton btn btn-default'>show/hide</button></td>
<tr class="service-header">
<td>4 (has class)</td>
<td>4 (has class)</td>
<td><button type='button' class='showHideButton btn btn-default'>show/hide</button></td>
</tr>
<tr>
<td>5 </td>
<td>5</td>
<td><button type='button' class='showHideButton btn btn-default'>show/hide</button></td>
</tr>
</table>
关于javascript - 使用 jQuery 隐藏表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44361781/