Question

我有一个简单的节目并隐藏Javascript：

// JS function used in show/hide connectivity details function in LIB
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".connectivityshow").click(function(event){
        var target = event.target.parentElement.nextSibling;
        $(target).toggle('blind');
    });
});
</script>

然后在我的PHP中我有：

print '<tr class="connectivityshow">';

表本身有一类“connectivity_list”我希望显示为class=connectivityshow的行和我想要隐藏的行没有类。

        // Adding more details to the connectivity list, line details (java show and hide)
        //Calculating Router IP Business (+1 from start ip)
        $ip_num = ip2long($ref['start_ip']);
        $start_ip = long2ip($ip_num + 1);
        print '<tr style="display:none">';
        printf('<td colspan="3">Radius Username: %s<br>Radius Password: %s<br>Bandwidth Usage Allowance: %s</td><td colspan = "4">Router IP: %s<br>Start IP: %s<br>IP Block Size: %s</td>',$ref['radius_username'], $ref['radius_pa$
        print '</tr>';

我有基于斑马的CSS，所以每个其他表都是不同的颜色。使用此布局，隐藏表从CSS中拾取第二种颜色。我很想让CSS只使用3行，但我确实有另一个没有显示和隐藏功能的表，它依赖于相同的CSS。

你怎么建议我过去这个？

  #main-content table.connectivity_list {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0px;
    border-bottom: 2px solid #999;
}
#main-content table.connectivity_list thead, #main-content table.connectivity_list thead tr, #main-content table.connectivity_list thead th, #main-content table.connectivity_list thead tr th {
    font-weight: bold;
    font-size: 12px;
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}
#main-content table.connectivity_list tbody {
}
#main-content table.connectivity_list tbody tr:nth-child(odd) {
    background: #ddd;
}
#main-content table.connectivity_list tbody tr {
    background: #ccc;
}
*/ #main-content table.connectivity_list td, #main-content table.connectivity_list th {
    padding: 2px;
    line-height: 1.3em;
}
#main-content table.connectivity_list tfoot td .bulk-actions {
    padding: 15px 0 5px 0;
}
#main-content table.connectivity_list tfoot td .bulk-actions select {
    padding: 4px;
    border: 1px solid #ccc;
}
#main-content table.connectivity_list tbody tr:hover td {
    background-color: #eee;
}

Answer 1

没有真正了解多少，但是如果您想要隐藏tr没有class的{{1}}，请从问题中的tid和bit中收集，请执行以下操作

   if($('table.connectivity_list').find('tr.Class').length == 0)
   {
       //this is tr with no class, hide it
   }

Answer 2

如果我理解正确，您应该可以使用static向tr添加connectivityshow类。然后，在您的JS中，将您的选择器更改为$(".connectivityshow:not(.static)")

这应该在任何connectivityshow点击上运行该功能，除非它的类别为static

修改

在你的php中，将tr的打印更改为print '<tr class="connectivityshow static">';

在您的js中，将点击事件更改为$(".connectivityshow:not(.static)").click

执行这两项操作可以让您根据需要设置tr的样式，而无需添加额外的CSS，但如果类static位于元素上，它也不会运行click事件。

Answer 3

我通过在CSS中创建新类来解决冲突。

谢谢大家。

Javascript / PHP，避免CSS冲突

3 个答案: