jquery intercepts the td content in the datatable and displays ellipses. When the row is clicked, the row height becomes higher and the entire content is displayed_html/css

jquery intercepts the td content in the datatable and displays ellipses. When the row is clicked, the row height becomes higher and the entire content is displayed_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:50:59

Original

3174 people have browsed it

通过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>

Copy after login

[color=#FF0000]点击行的时候行高度变高显示全部内容[/color] 想达到这种效果