CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
Seb
Seb

Reputation: 1113

How to let user hide rows from a html table

I have a table which gets dynamically populated by the results of a search query:

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>';

The result is a table of items. Now what I would like to do is give the user the possibility to hide any row by a single click or, if not possible, by checking boxes and hiting a second Hide(delete) button at the and of the table. The rows must not be deleted from the database only hidden from view.

Any ideas how I could do this?

Thx Seb

///////////////////////////// EDIT ////////////////////////////////////////////

Thx for the Input!

Here is what worked for me:

In table:

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

script:

    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;
    }

Thx for your help!

Upvotes: 0

Views: 105

Answers (3)

davidkonrad
davidkonrad

Reputation: 85538

Think the far most easy would be :

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

Upvotes: 1

Linga
Linga

Reputation: 10563

Try something like this

$("#tableID").delegate("td", "click", function() {
  $(this).closest("tr").hide();
});

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

Basically, you want something like this:

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

If you wish to add checkbox inside each row:

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

Upvotes: 1

Related Questions