Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts

    jQuery Delete a table row

    I am trying to make a messages system where you can delete messages and it just slides away.

    I can get his working in a stand alone php file, but when I try to put it on my site, it doesn't work correctly.

    This is the whole code for the working file
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('a.delete').click(function(e) {
    		e.preventDefault();
    		var parent = $(this).parent();
    		$.ajax({
    			type: 'get',
    			url: 'index.php',
    			data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
    			beforeSend: function() {
    				parent.animate({'backgroundColor':'#fb6c6c'},300);
    			},
    			success: function() {
    				parent.slideUp(300,function() {
    					parent.remove();
    				});
    			}
    		});
    	});
    });
    </script>
    <body>
    <?php
    
    mysql_connect("localhost", "root", "")or die("cannot connect to server");
    mysql_select_db("ludatha_test")or die("cannot select db");
    
    if(isset($_GET['delete']))
    {
    	$query = 'DELETE FROM notices WHERE id = '.(int)$_GET['delete'];
    	$result = mysql_query($query);
    }
    
    $query = 'SELECT * FROM notices ORDER BY Mtitle ASC';
    $result = mysql_query($query);
    while($row = mysql_fetch_assoc($result))
    {
    	echo '<div class="record" id="record-"> 
    			
    		<td width="10"><img src="http://ludatha.com/.smileys/letter.gif" alt="" /></td> 
    		<td><a href="#">Hey!!, From <strong>Ludatha Bot</strong> on the <strong>18th March 12:03</strong></a></td> 
    		<td width="200"><a href="#"><img src="http://ludatha.com/.smileys/reply.gif" alt="" /> Reply</a> | <a href="?delete=4" class="delete"><img src="http://ludatha.com/.smileys/action_delete.gif" alt="" /> Delete</a> | </div></td></tr>
    			
    			
    			<div class="record" id="record-'.$row['id'].'">			
    		<td width="10"><img src="'.$row['Mread'].'" alt="" /></td>
    		<td><a href="#">'.$row['Mtitle'].', From <strong>'.$row['Mfrom'].'</strong> on the <strong>'.$row['MreadTime'].'</strong></a></td>
    		<td width="200"><a href="#"><img src="http://ludatha.com/.smileys/reply.gif" alt="" /> Reply</a> | <a href="?delete='.$row['id'].'" class="delete"><img src="http://ludatha.com/.smileys/action_delete.gif" alt="" /> Delete</a> |</div>';
    }
    ?>
    
    
    </body>
    </html>
    I added the correct files to the header and included the code, but it only removes one cell, no the whole table row.

    Code:
    <script src="http://localhost/system/js/jquery.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() {
    	$('a.delete').click(function(e) {
    		e.preventDefault();
    		var parent = $(this).parent();
    		$.ajax({
    			type: 'get',
    			url: 'http://localhost/system/pages/messages.php',
    			data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
    			beforeSend: function() {
    				parent.animate({'backgroundColor':'#fb6c6c'},300);
    			},
    			success: function() {
    				parent.slideUp(300,function() {
    					parent.remove();
    				});
    			}
    		});
    	});
    });
    </script>
    I wont show the php code here because this forum is not for php, but here is what is outputted to the browser:

    Code:
    <tr class="closed-PM"><div class="record" id="record-4"> 
    			
    		<td width="10"><img src="http://ludatha.com/.smileys/letter.gif" alt="" /></td> 
    		<td><a href="#">Hey!!, From <strong>Ludatha Bot</strong> on the <strong>18th March 12:03</strong></a></td> 
    		<td width="200"><a href="#"><img src="http://ludatha.com/.smileys/reply.gif" alt="" /> Reply</a> | <a href="/delete/4/" class="delete"><img src="http://ludatha.com/.smileys/action_delete.gif" alt="" /> Delete</a> | </div></td></tr>
    Can anyone tell me what to do to delete the whole row. (only the cell with <a href="/delete/4/" class="delete"><img src="http://ludatha.com/.smileys/action_delete.gif" alt="" /> Delete</a> is deleted)

  2. #2
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts
    Change
    Code:
    var parent = $(this).parent();
    to
    Code:
    var parent = $(this).parent().parent();
    Because the parent of the hyperlink is the table cell, and then the parent of the table cell is the table row.

  3. Users who have thanked Iszak for this post:

    Ludatha (04-16-2009)

  4. #3
    New Coder
    Join Date
    Feb 2009
    Location
    Uzbekistan
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also for more detailed code to remove rows from table can be found here. Post is called "How to remove bottom table row" and it also provides you with a jQuery code to remove the N'th row. Hope you'll find it useful...


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •