动态生成的table表格，及解决td无法设置固定高度的问题

最新推荐文章于 2023-12-11 15:24:24 发布

漂移的电子

最新推荐文章于 2023-12-11 15:24:24 发布

阅读量1.3k

点赞数 1

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/weixin_40030173/article/details/107059754

版权

js 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

一、解决动态生成的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
			}