使用jQuery隐藏表格行

我想隐藏一堆使用javascript的表格行。我想我已经得到了大部分的代码，我只是不知道为什么它没有运行隐藏。使用jQuery隐藏表格行

任何帮助表示赞赏。

的代码是：

<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

我有不知道为什么它不会隐藏在点击的行，我已经测试了一表具有多个具有类service-header的行，但没有任何运气。

来源

2017-06-05 WellConnectedIT

'e'没有在事件处理程序'hideButton（）'中定义，你也是附件g每次单击元素时发生新的“单击”事件。 “while”循环的目的是什么？ – guest271314

发布HTML过..也或者，定义的功能点击或使用事件处理程序，但不是两个 –

你可以标记以及 – guradio

请参阅下面的代码按您的要求我在下面example.Hopefully创建它会解决你的问题

$(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>

来源

2017-06-05 05:43:28 GSB

这里有一些建议，以使这项工作。（）和点击“......”都做同样的事情（初始化点击函数）。所以我建议删除函数hideButton（）{}从

现在你的代码。你的ID“#showHideButton”必须是一个单一的网页是独一无二的。

如果仍然没有工作然后做检查你的HTML结构。这些更改后

尝试。希望这有帮助

来源

2017-06-05 07:41:25

使用jQuery隐藏表格行

回答

相关问题