您的位置:首页 > Web前端 > JavaScript

js 列宽根据内容自适应

2016-12-21 17:25 225 查看
var colNum = 1;//此数值会被重置;
var rowNum = 10;//此数值不会改变;
//列宽根据内容自适应;
function resizeColumnWidth() {
setTimeout(function () {
for(var k = 0; k < colNum; k++){
var tdText = $('#list').find("div").eq(k).html();
var tdLenth = (tdText.length)*20;//获取行的第一个单元格
$('thead').children().children().children("div").eq(k).width(tdLenth);
for(var r = 0; r < rowNum; r++){
var tr = $('#list').children().children().eq(r);
tr.find("div").eq(k).width(tdLenth);
}
}
}, 1000);
}

注意:

1.以上代码需要写在$(document).ready(function() {}下面,也就是在文档加载完成之后;

2.里面写 settimeout是因为$(document).ready的时候,数据不一定加载完成,所以延迟到dom加载完成之后,因为$('#list')是js生成的,不加载完取不到;

3,大致思路如代码所示,具体的html页面需针对性修改;

4,大致思路就是jquery操作html,循环遍历所有的单元格,动态取单元格中 的字符串长度,一般是  字符串长度*20px作为单元格宽度(个人测试)。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: