Bug In jQuery?

Discussion in 'jQuery' started by cancer10, Nov 13, 2008.

0
  1. #1
    Hello,

    Please look into this code (or the attached file)

    When clicking on the button toggles the table to hide and then to show, it leaves an extra width on the table. (See screenshot for details)

    Is this a bug in jQuery? Can we overcome this?



    [​IMG]




    <!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>Untitled Document</title>
<script language="javascript" src="jquery-1.2.6.js"></script>
<script>
	$().ready(function(){
					   $("#mybtn").click(function(){
										  
										  $("#myid").slideToggle();
										  });
					   
					   });
</script>
</head>
<body>
<input type="button" id="mybtn" value="Clicky" />
<table width="50%" border="0" cellspacing="0" cellpadding="0" id="myid" bgcolor="#CCCCCC" align="center">
  <tr>
    <td align="center"><strong>Name</strong></td>
    <td align="center"><strong>City</strong></td>
    <td align="center"><strong>Coutry </strong></td>
    <td align="center"><strong>Telephone</strong></td>
    <td align="center"><strong>Designtion</strong></td>
  </tr>
  <tr>
    <td align="center">Paul</td>
    <td align="center">New York</td>
    <td align="center">US</td>
    <td align="center">111222333444</td>
    <td align="center">CEO</td>
  </tr>
  <tr>
    <td align="center">Adam</td>
    <td align="center">Chicago</td>
    <td align="center">US</td>
    <td align="center">11558899</td>
    <td align="center">Programmer</td>
  </tr>
</table>

</body>
</html>
    Code (markup):

    Thanx
     

    Attached Files:

    cancer10, Nov 13, 2008 IP
  2. rene7705

    rene7705 Peon

    Messages:
    233
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try 
    
<table style='width:100%' border="0" cellspacing="0" cellpadding="0" id="myid" bgcolor="#CCCCCC" align="center">
    Code (markup):
     
    rene7705, Nov 13, 2008 IP
  3. cancer10

    cancer10 Guest

    Messages:
    364
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Question:

    How do you hide/unhide an entire row in a table using jQuery?

    Warpping it with a <DIV> didnt help :(

    Thanx
     
    cancer10, Nov 20, 2008 IP
  4. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #4
    you need to reference the TR element direct (via ids) or as child node of the table itself. for example, you can also have

    <tr>
    <td>foo</td>
    <td>bar</td>
    <td class="closer">close</td>
    </tr>

    you can do a $(".closer").click() event that gets parent (the TR) and changes display to none etc.
     
    dimitar christoff, Nov 21, 2008 IP