Question

美好的一天我在我的网站上使用Asp.net，我想删除和隐藏具有类属性的特定td

这是我的HTML代码

<table>
<tr>
<td class="1"> 1 </td>
<td class="1"> 1 </td>
<td class="2"> 2 </td>
<td class="2"> 2 </td>
</tr>
</table>

现在我在我的网站上有2个名为btn1和btn2

的按钮

如果点击btn1 我想用1删除所有类，只显示带有2的类

和

如果点击btn2 我想用2删除所有类，只显示1

的类

Answer 1

DEMO

包含脚本

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<强> HTML

<input type="button" id="btn1" value="bnt1"/>
<input type="button" id="btn2" value="bnt2"/>

<强> JS

$('#btn1').click(function() {
    $('td.1').show();
    $('td.2').hide();
});
$('#btn2').click(function() {
    $('td.2').show();
    $('td.1').hide();
});

参考文献

Answer 2

使用jQuery .hide()和.show()函数，如下所示：

<script type="text/javascript">
    $(document).ready(function() {
        $('#Button1').click(function () {
            $('.1').hide();
            $('.2').show();
        });

        $('#Button2').click(function () {
            $('.2').hide();
            $('.1').show();
        });
    });
</script>

<table>
    <tr>
        <td class="1">1</td>
        <td class="1">1</td>
        <td class="2">2</td>
        <td class="2">2</td>
    </tr>
</table>
<input type="button" id="Button1" value="Button 1" />
<input type="button" id="Button2" value="Button 2" />

这是jsFiddle。

使用脚本删除并显示TD

2 个答案: