[jQuery] table rows are reluctant to give up their space

dan conner Thu, 09 Nov 2006 11:31:41 -0800

nd am seeing something strange, though it is probably more _javascript_ related. I have a simple table of rows for items in a shopping cart. in each row is a remove link that should remove the item from the cart, and the row from the table. here's the basic HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>_javascript_ fun</title>
<script src="" type="text/_javascript_"></script>

<script src="" type="text/_javascript_"></script>
<style type="text/css">
body { font-family:Arial;  }
</style>
</head>
<body>


    <table cellpadding="10" cellspacing="0" class="cartitems" id="cartitems" width="100%" bgcolor="blue">
      <tr id="product1">

        <td bgcolor="yellow">
          <a href="" id="removeitem1" class="removeitem">remove</a>
        </td>
      </tr> 
      <tr><td bgcolor="green">green</td></tr>

    </table>
  </body>
</html>

and the contents of cart_index.js:

$(document).ready(function(){
  $("a#removeitem1").click(
    function(){ 
      $("tr#product1").fadeOut("slow", function() { 

        $(this).remove(); 
      }); 
      return false; 
    }
  );
})

which does fade the contents of the row out, and removes the element from the table, but the table row does not "collapse". or the height does not go away. see the example here:
http://danmarvelo.us/working/jquery/hiderow_1.html

I figured out that if I commented out the y.display = "block"; on line 1511 of jquery-latest.js, the row did actually go away. so I thought it might just be setting that property. but if I hid the row just by setting the css properties, the row did go away, so it wasn't exactly the "block" that was causing the problems.

$(document).ready(function(){
  $("a#removeitem1").click(
    function(){ 
      $("tr#product1").css("display", "block");

      $("tr#product1").css("display", "none");

      return false; 
    }
  );
})

or, see http://danmarvelo.us/working/jquery/hiderow_2.html

but when I executed the code to set the display property to "none" after a timer, we were back to the original behavior:

$(document).ready(function(){
  $("a#removeitem1").click(
    function(){ 
      $("tr#product1").css("display", "block");

      setTimeout(function() { $("tr#product1").css("display", "none"); }, 1000);

      return false; 
    }
  );
})

or, see http://danmarvelo.us/working/jquery/hiderow_3.html

what is up with that? anyone have ideas on this? this is all in Firefox 2.0 on Windows. it works fine in IE :)

_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

[jQuery] table rows are reluctant to give up their space

Reply via email to