ホームページ > 記事 > ウェブフロントエンド > jquery はデータテーブルの td コンテンツをインターセプトし、行をクリックすると、行の高さが高くなり、コンテンツ全体が表示されます_html/css_WEB-ITnose
jquery はデータテーブルの td コンテンツをインターセプトし、行をクリックすると、行の高さが高くなり、コンテンツ全体が表示されます_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:50:593163ブラウズ
通过jquery实现当内容显示过多的时候内容截取指定长度50个字，其余显示省略号...当点击行的时候行高度变高，比如300px；如果还是显示不完的剩下的还显示省略号，不再管他了！
<html><body> <table id="example" class="display" cellspacing="0" width="100%" border="1"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr style="width:500px"> <td>Tiger Nixon</td> <td>除为传统硬件厂商提供技术支持外，Baidu Inside计划还联合京东、神州数码战略合作伙伴，提供覆盖线上、线下的立体式销售网络，帮助传统硬件厂商迅速将产品推向市场。凡是取得Baidu Inside授权的智能硬件产品，在营销上能享受多种优惠，列入京东商城会提供更低的准入门槛、更优惠的销售费用，并且在重要页面或区域进行展示、推荐，同时，百度也会以多种形式为Baidu Inside产品页面提供流量支持。 </td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> </tbody> </table> </body> </html>[color=#FF0000]点击行的时候行高度变高显示全部内容[/color] 想达到这种效果
回复讨论(解决方案)
定义高度之后，设置属性：overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
高度设置成 height:auto 逐渐增加字数 确保高度不超过最大高度 只说思路
你们怎么都没有高手出现，我已经实现了！
实现了 不上代码
请问你是如何解决的呢？能分享一下吗
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。