需求
页面展示列表的时候,有时会出现某列列表的内容太长而使展示列表不美观。为此问题,设计列表的过长内容用省略号显示,并且点击td内容,可以显示全部内容。
代码
- css
table {
table-layout:fixed;/*table的内部布局固定大小,才可以通过td的width控制宽度*/
word-wrap:break-word; /*允许长单词换到下一行*/
}
.table thead tr th, .table tbody tr td {
vertical-align: middle;
text-align: center;
white-space: nowrap;/*规定段落的文本不进行换行*/
overflow: hidden;/*超出隐藏*/
text-overflow: ellipsis;/*隐藏的字符用省略号表示 IE*/
-moz-text-overflow: ellipsis;/*隐藏的字符用省略号表示 火狐*/
}
- js代码–点击td显示全部内容
$(".td1").on("click",function() {
if (this.offsetWidth < this.scrollWidth) {
var that = this;
var text = $(this).text();
layer.alert(text);
}
});
以上是对其中某列做的处理,所以这里用的class属性,若是对所有td都进行处理,则换成以下
$("td").on("click",function() {
if (this.offsetWidth < this.scrollWidth) {
var that = this;
var text = $(this).text();
layer.alert(text);
}
});
- html 页面table代码:
<table id="contentTable" >
<thead>
<tr>
<th>申请件编号</th>
<th>产品代码</th>
<th>异常节点</th>
<th>处理结果</th>
<th>处理人</th>
<th>处理时间</th>
<th class="td1">异常原因</th>
</tr>
</thead>
<col style="width: 15%" />
<col style="width: 7%" />
<col style="width: 15%" />
<col style="width: 15%" />
<col style="width: 7%" />
<col style="width: 14%" />
<col style="width: 27%" />
<tbody >
<tr>
<td >appNo</td>
<td>productcd</td>
<td>ctName</td>
<td >procResult</td>
<td >procUser</td>
<td>time</td>
<td class="td1">msg</td>
</tr>
</tbody>
</table>
注意
css中table使用 table-layout:fixed;可能会使td宽度失效,解决如下:
<!--在tbody前加入,有几列就添加几个<col>,按照100%拆分-->
<col style="width: 15%" />
<col style="width: 7%" />
<col style="width: 15%" />
<col style="width: 15%" />
<col style="width: 7%" />
<col style="width: 14%" />
<col style="width: 27%" />