使用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隱藏表格行

回答

相關問題