Question

我想问一下如何隐藏桌子中的某些类别。

如何通过点击按钮隐藏电子邮件类别？

<table>
<tr class='ftable2'>
    <th align="left">name</th>
    <th align="left">email adress</th>
    <th align="right">date</th>
    <th align="right">cat</th>
</tr>
<tr>
    <td align='left'>name</td>
    <td align='left'>email@email.com</td>
    <td align="right">2013</td>
    <td align="right">msg</td>
</tr>
<tr>
    <td align='left'>name</td>
    <td align='left'>email@email.com</td>
    <td align="right">2013</td>
    <td align="right">msg</td>
</tr>
<tr>
    <td align='left'>name</td>
    <td align='left'>email@email.com</td>
    <td align="right">2013</td>
    <td align="right">msg</td>
</tr>
<tr>
    <td align='left'>name</td>
    <td align='left'>email@email.com</td>
    <td align="right">2013</td>
    <td align="right">msg</td>
</tr>

Answer 1

您想要隐藏特定的列？

看到这个小提琴：http://jsfiddle.net/g2rUk/1/

使用nth-child选择器：

$('#tableId').find('td:nth-child(2)').hide();

n从0开始。

Answer 2

只需在电子邮件单元格中添加一些类或数据属性，然后通过选择器找到它，它们就会隐藏它。就像<td align="left" class="email-cell">email@email.com</td>

一样

和

$('#your-button).on('click', function() {
    $('.email-cell').hide()
});

Answer 3

使用:nth-child()伪选择器选择第二列。隐藏使用hide()方法。

$(".button").click(function(){
    $("table tr td:nth-child(2)").hide();
});

FIDDLE

Answer 4

试试这个..

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btn").click(function()
{
$(".email").hide();
});
});
</script> 
</head>
<table>
<tr class='ftable2'>
    <td align="left"><b>name</b>
    </td>
    <td align="left" class="email"><b>email adress</b>
    </td>
    <td align="right"><b>date</b>
    </td>
    <td align="right"><b>cat</b>
    </td>
</tr>
<tr>
    <td align='left'>name</td>
    <td align='left' class="email">email@email.com</td>
    <td align="right">2013</td>
    <td align="right">msg</td>
</tr>
<tr>
    <td align='left'>name</td>
    <td align='left' class="email">email@email.com</td>
    <td align="right">2013</td>
    <td align="right">msg</td>
</tr>
<tr>
    <td align='left'>name</td>
    <td align='left' class="email">email@email.com</td>
    <td align="right">2013</td>
    <td align="right">msg</td>
</tr>
<tr>
    <td align='left'>name</td>
    <td align='left' class="email">email@email.com</td>
    <td align="right">2013</td>
    <td align="right">msg</td>
</tr>
</table>
<button id="btn">hide email</button>

jQuery隐藏表类

4 个答案: