javascript - 如何让用户隐藏 html 表中的行

Question

我有一个由搜索查询结果动态填充的表:

echo '<table class="table">';

if ($num==0) echo "<tr><td>Sorry, no items found.</td></tr>"; 

else {   
 echo '<tr> <th>Nr.</th> <th>Name</th>';
 echo '<th>Description</th> <th>Image</th>';

$lf = 1;
while ($dsatz = mysql_fetch_assoc($res))
    {
        echo '<tr>';
    echo "<td>$lf</td>";
    echo '<td><a href="'. $dsatz['link'] . '" target="_blank">' . $dsatz["name"] . '</a></td>';
    echo '<td>' . $dsatz["description"] . '</td>';
    echo '<td><a href="'. $dsatz['link'] . '" target="_blank"><img src="' . $dsatz['image'] . '" style="height:100px; width:auto" /></a></td>';
    echo '</tr>';
        $lf = $lf + 1;
        }            
}
echo '</table>';

结果是一个项目表。现在我想做的是让用户可以通过单击来隐藏任何行，或者如果不可能的话，通过选中复选框并点击表中的第二个隐藏(删除)按钮来隐藏任何行。这些行不得从数据库中删除，只能从 View 中隐藏。

我有什么想法可以做到这一点吗？

谢谢塞布

//////////////////////////////编辑/////////////////////////////////////////////

感谢您的输入!

这是对我有用的:

表中:

echo "<td><input type='checkbox' name='hide_cand' style='float:right' id='hide_cand' onclick=' return hideRow(this)'/></td>";

脚本:

    function hideRow(checkbox)
    {
    if(confirm('This action can not be undone, are you sure you want to delete this item from the list?'))
        {
            checkbox.parentNode.parentNode.style.display = "none";
            return true;
        }
        return false;
    }

感谢您的帮助!

Answer 1

基本上，你想要这样的东西:

$('.table').on('click','tr',function(){
    $(this).hide();
});

如果您想在每行内添加复选框:

$('.table').on('change','tr :checkbox',function(){
    $(this).closest('tr').hide(); //no need here to check for checkbox state
});