一、解决动态生成的table 的td无法设置固定高度的问题:td里加一个div,在给div设置高度即可。
二、动态生成表格源码如下:
<table class="table table-striped text-left ctltable" id="list">
<thead>
<tr>
<th width="10%">序号</th>
<th width="10%">1</th>
<th width="10%">2</th>
<th width="10%">3</th>
<th width="10%">4</th>
<th width="10%">5</th>
<th width="40%">操作</th>
</tr>
</thead>
<tbody id="dynamic_list">
<td colspan="7" style="text-align:center;">
<span class="table-loading"></span>加载中...</td>
</tbody>
</table>
wqutil.ajax({
url: 'http://www.xxx',
data: data,
successCallback: function(res) {
if (res.code === 1) {
$('#dynamic_list').html("")
//动态列表
var list = {};
list.items = res.data.data;
var dynamic_list_tpl = list_template(dynamic_list_tpl, list);
if (dynamic_list_tpl == "") {
dynamic_list_tpl =
"<tr ><td colspan='7' class='text-center'>暂无数据</td></tr>"
}
$('#dynamic_list').append(dynamic_list_tpl)
} else {
layer.alert(res.message, {
title: '温馨提示',
icon: 2
});
}
}
});
function list_template(html_tpl, list) {
var arr = list.items
for (var i = 0; i < arr.length; i++) {
html_tpl += "<tr><td>" + arr[i].id +
"</td><td ><div class='device_sn_style'>" + arr[i].device_sn + "</div></td><td>" + arr[i].a +
"</td><td>" + arr[i].b + "</td><td>" + arr[i].c +
"</td><td>" + arr[i].d + "</td><td><a href='javascript:;' class='link detail' data-target='#pass_detail' data-toggle='modal' data-id='" +
arr[i].id +
"'>详情</a></td></tr>";
}
return html_tpl
}