向Javascript/Jquery添加多个属性_Javascript_Jquery_Html_Html Table_Show Hide

向Javascript/Jquery添加多个属性

javascript jquery html

向Javascript/Jquery添加多个属性,javascript,jquery,html,html-table,show-hide,Javascript,Jquery,Html,Html Table,Show Hide,我目前正在处理一组表格，我让它们在点击按钮时展开和收缩。但是，我在创建一个同时展开所有表的按钮时遇到了问题。请看我的密码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>  <script src

我目前正在处理一组表格，我让它们在点击按钮时展开和收缩。但是，我在创建一个同时展开所有表的按钮时遇到了问题。请看我的密码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>   <!--this first part is easy to implement-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        $('.vis'+$(this).attr('vistoggle')).toggle();
    });
});
</script>
</head>
<body>
<a href="#" class="toggler" vistoggle="1">Expand all</a> <!--vistoggle needs to have values 1 and 2 in it-->
<table>
    <tr>
        <td>safeaef</td>
        <td>asdfaef</td>
        <td>asfead</td>
        <td><a href="#" class="toggler" vistoggle="1">Expand</a></td>
    </tr>
    <tr class="vis1" style="display:none">
        <td>asdfae</td>
        <td>zxcvry</td>
        <td>rteyertr</td>
        <td></td>
    </tr>
    <tr class='vis1' style='display:none'>
        <td>tsersg</td>
        <td>sdgfs</td>
        <td>wregssdf</td>
        <td></td>
    </tr>
    <tr class="vis1" style="display:none">
        <td>sdfgrs</td>
        <td>sgdfgsr</td>
        <td>Cewret</td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td>cfasdfas</td>
        <td>1adfaed</td>
        <td>asdfasdfea</td>
        <td><a href="#" class="toggler" vistoggle="2">Expand</a></td>
    </tr>
    <tr class="vis2" style="display:none">
        <td>asdfaefas</td>
        <td>1asdf</td>
        <td>Cisdfae</td>
        <td>22fasdew</td>
    </tr>
    <tr class="vis2" style="display:none">
        <td>asdfaef</td>
        <td>1sefa0</td>
        <td>Ciasdf 2</td>
        <td></td>
    </tr>
</table>
</body>
</html>


$（文档）.ready（函数（）{
$（“.toggler”）。单击（函数（e）{
e、 预防默认值（）；
$（'.vis'+$（this.attr（'vistoggle'））.toggle（）；
});
});
萨法耶夫
asdfaef
阿斯菲尔德
asdfae
zxcvry
特耶特
采斯格
sdgfs
wregssdf
sdfgrs
sgdfgsr
塞雷特
cfasdfas
1adfaed
asdfasdfea
asdfaefas
1asdf
西斯德福
22fasdew
asdfaef
1sefa0
Ciasdf 2

将类分开，例如

vis1

变为

visone

（两个类），然后对数据属性的值进行条件检查。如果其设置为

all

，则使用类

vis

切换所有元素，否则切换特定元素：

<script>
$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        var vistog = $(this).attr('vistoggle');
        if(vistog == 'all'){
             $('.vis').toggle();
        }else{
            $('.vis.' + vistog).toggle();
        }

    });
});
</script>
</head>
<body>
<a href="#" class="toggler" vistoggle="all">Expand all</a> <!--vistoggle set to all -->
<table>
    <tr>
        <td>safeaef</td>
        <td>asdfaef</td>
        <td>asfead</td>
        <td><a href="#" class="toggler" vistoggle="one">Expand</a></td>
    </tr>
    <tr class="vis one" style="display:none">
        <td>asdfae</td>
        <td>zxcvry</td>
        <td>rteyertr</td>
        <td></td>
    </tr>
    <tr class='vis one' style='display:none'>
        <td>tsersg</td>
        <td>sdgfs</td>
        <td>wregssdf</td>
        <td></td>
    </tr>
    <tr class="vis one" style="display:none">
        <td>sdfgrs</td>
        <td>sgdfgsr</td>
        <td>Cewret</td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td>cfasdfas</td>
        <td>1adfaed</td>
        <td>asdfasdfea</td>
        <td><a href="#" class="toggler" vistoggle="two">Expand</a></td>
    </tr>
    <tr class="vis two" style="display:none">
        <td>asdfaefas</td>
        <td>1asdf</td>
        <td>Cisdfae</td>
        <td>22fasdew</td>
    </tr>
    <tr class="vis two" style="display:none">
        <td>asdfaef</td>
        <td>1sefa0</td>
        <td>Ciasdf 2</td>
        <td></td>
    </tr>
</table>
</body>
</html>


$（文档）.ready（函数（）{
$（“.toggler”）。单击（函数（e）{
e、 预防默认值（）；
var vistog=$（this.attr（'vistoggle'）；
如果（vistog=='all'）{
$（'.vis'）.toggle（）；
}否则{
$（'.vis.'+vistog.toggle（）；
}
});
});
萨法耶夫
asdfaef
阿斯菲尔德
asdfae
zxcvry
特耶特
采斯格
sdgfs
wregssdf
sdfgrs
sgdfgsr
塞雷特
cfasdfas
1adfaed
asdfasdfea
asdfaefas
1asdf
西斯德福
22fasdew
asdfaef
1sefa0
Ciasdf 2

您可以检查需要切换的属性，如果它与所有打开的1和2匹配，则在您的表不是动态的情况下，此操作有效

<a href="#" class="toggler" vistoggle="all">Expand all</a>

$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        if($(this).attr('vistoggle') == "all"){
             $('.vis1').toggle();  
             $('.vis2').toggle();     
        }else{
            $('.vis'+$(this).attr('vistoggle')).toggle();
        }
    });
});


$（文档）.ready（函数（）{
$（“.toggler”）。单击（函数（e）{
e、 预防默认值（）；
if（$（this.attr（'vistoggle'）==“all”）{
$（'.vis1'）.toggle（）；
$（'.vis2'）.toggle（）；
}否则{
$（'.vis'+$（this.attr（'vistoggle'））.toggle（）；
}
});
});

Fiddle:

您可以尝试构建如下选择器： $（'tr[class^=“vis”]”）它将选择所有元素，其中类属性以“vis”开头

但从我看到的情况来看，您希望第一行始终可见，因此我建议简单地将表头和表体分开，如下所示：

<table>
    <thead><tr>...</tr></thead>
    <tbody id="table-one" class="vis">
        <tr>...</tr>
        <tr>...</tr>
    </tbody>
</table>
<table>
    <thead><tr>...</tr></thead>
    <tbody id="table-two" class="vis">
        <tr>...</tr>
        <tr>...</tr>
    </tbody>
</table>

要切换所有表，并仅切换其中一个表，您可以使用：

$('tbody#tbody-one').toggle();

出于性能原因，这可能是一个更好的主意（ID比类快得多）。 TBODY的ID属性可以像您现在存储它一样存储（在按钮的属性中）

小提琴示例：

编辑要使HTML有效，您应该使用数据属性或使用javascript绑定事件，而不是简单地在

按钮标记中添加自定义属性。例如：
<button data-toggle-id="tbody-one">Toggle</button>

切换

我更新了小提琴。
这正是我想要的，但我发现了一个问题。切换“全部”时，关闭的将打开，打开的将关闭。这意味着如果用户有一个打开的，那么它就会关闭。这正是jQuery.toggle（）
所做的：）如果你想让它有不同的行为，你需要使用show（）
和hide（）
（或fadeIn/fadeOut等）函数，而不是toggle（）
，并用if语句来控制行为。是的。我就是这么做的。
<button data-toggle-id="tbody-one">Toggle</button>