简体   繁体   English

当div高度扩展时如何扩展表格行高度

[英]How to expand table row height when div height expands

I have a jQuery script with expands a div in a table on click, however the table row doesn't expand with the div! 我有一个jQuery脚本,可在单击时在表中扩展div,但是表行不会随div扩展!

Any help much appreciated, 任何帮助表示赞赏,

this is my Jquery: 这是我的jQuery:

<script type="text/javascript">
 $(document).ready(function(){    
$(".expanderHead").click(function(){
    var $exsign = $("#expanderSign");
    $(this).find("#expanderContent").slideToggle();
    $exsign.html($exsign.text() == '+' ? '-': '+');   
    // simplify your if/else into one line using ternary operator
    // if  $exsign.text() == "+" then use "-" else "+"
    });    
});
</script>

This is my table code: 这是我的表代码:

echo "<table width='50%' style='border-bottom:1px solid #000000;'>";
echo "<tr>";
echo "<td>";
echo "<div id='page-wrap'>";
echo "<div class='discounted-item freeshipping'>";

echo "<a href='./img/users/" . $row['category'] . "/" . $row['username'] . "/" . $row['filename'] . "' rel='lightbox'><img src=\"./img/users/" . $row['category'] . "/" . $row['username'] . "/" . $row['filename'] . "\" alt=\"\" width='15%' height='80%' /></a>";


    echo "<div class='expanderHead'>";

echo "<div class='reasonbar'><div class='prod-title'>" .$row['fname'] . "</div><div class='reason' style='width: 29%;'><b>". $row['firstname'] . " " . $row['surname'] ."</b></div></div>";


echo "<div id='expanderContent' style='display:none'><div class='reasonbar'><div class='prod-title1' style='width: 70%;'>" . $row['lname'] . "</div><div class='reason1' style='width: 29%;'>Category:<br /> ". $row['category'] . "</div></div></div>";

echo "<div class='reasonbar'><div class='prod-title2' style='width: 70%;'><a href='#'>Click here For more info</a></div><div class='reason2' style='width: 29%;'>Price: &pound;". $row['price'] . "</div></div>";




echo "</td>";
echo "</tr>";
echo "</td>";
echo "</tr>";
echo "</div>";
echo "</table>";

this is my CSS: 这是我的CSS:

.discounted-item            { width: 100%; position: relative; cursor: pointer;
                          height: 90px; }
.discounted-item:hover { background-color:#FC6;}

.discounted-item img        { position: absolute; top: 0; left: 0; }
.freeshipping .reasonbar    { background: url(); }
.freeshipping               { background: ; }
.reasonbar                  { padding: 4px 0 4px 175px; overflow: hidden;
                          width: 515px; color: black; font-size: 10px; }
.reason                     { width: 49%; float: right; text-align: right; text-transform: uppercase; 
                          letter-spacing: 2px; padding: 0 5px 0 0; font-size: 10px; }
.reason1                     { float: right; text-align: right; text-transform: uppercase; 
                          letter-spacing: 2px; }
.reason2                     { float: right; text-align: right; text-transform: uppercase; 
                            letter-spacing: 2px; font-family: Tahoma, Geneva, sans-serif; font-style: italic; font-size: 14px;}
.reason3                     { float: right; text-align: right; text-transform: uppercase; 
                          letter-spacing: 2px; font-family: Tahoma, Geneva, sans-serif; font-style: italic; font-size:12px; }

.prod-title                 { width: 49%;  float: left; font: bold 14px Helvetica, Sans-Serif; }
.prod-title1                 { width: 49%; height: 90px; float: left; font: 12px "Lucida Grande", Arial, Sans-Serif;  }
.prod-title2                 { width: 49%; height: 20px; float: left; font: 18px "Lucida Grande", Arial, Sans-Serif; text-overflow:ellipsis; overflow:hidden; white-space:normal;  }
.prod-title2                 { width: 49%; height: 20px; float: left; font: 18px "Lucida Grande", Arial, Sans-Serif; text-overflow:ellipsis; overflow:hidden; white-space:normal;  }

.discount-bar               { width: 59%; height: 70px; background-color:yellow; padding: 10px 0 10px 150px; font: 18px "Lucida Grande", Arial, Sans-Serif; text-overflow:ellipsis; overflow:hidden; white-space:normal;}

As far as I can see, the code is working properly-the div "expanderContent" expands and also changes its dimensions. 据我所知,代码可以正常工作-div“ expanderContent”会扩展并更改其尺寸。 Which browser are you performing the tests? 您在哪个浏览器上执行测试?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM