jquery,js获取列总宽度减去所有td列加起来的宽,求剩余

a776135310 2017-08-09 01:56:21

我需求是这样:除了详细地址,其他列展示完还有空间的话,才去把详细地址展示出来
我的思路是 这样:总宽度减去所有td加起来的宽度,求剩余
请问我思路怎么实现,如果有别的思路也可以教教我,比较急,求你们了大神
...全文
348 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
td width不要定宽,然后td里面的内容用inline元素(如span,label)包起(js添加这个操作也行),然后计算这些span,label的总宽度及高度(如果高度不为一行的高度时说明换行了不够容下操作列),而不是直接计算td的,大概如下

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<table border="1" id="mytb">
<tr><td>中国忍受</td><td>中国忍受</td><td>中国忍受中国忍受</td><td>详细地址</td></tr>
<tr><td>中国忍受</td><td>中国忍受</td><td>中国忍受中国忍受</td><td>中国忍受</td></tr>
<tr><td>中国忍受</td><td>中国忍受</td><td>中国忍受中国忍受</td><td>中国忍受</td></tr>
</table>
<script>
var newLine = false, totalTdContentWidth = 0, maxTotalTdContnetWidth = -1, lineHeight = 0
, tableWidth = 330;//自己修改表格宽度测试

$('#mytb').attr('width',tableWidth).find('tr').each(function () {
totalTdContentWidth = 0;
$('td:not(:last-child)', this).each(function () {
var s = this.innerHTML;
if (lineHeight == 0) {//获取行高
this.innerHTML = '<div style="width:' + this.offsetWidth + 'px;height:' + this.offsetHeight + 'px;overflow:hidden"><div style="width:999px"><span>' + this.innerHTML + '</span></div></div>';
lineHeight = this.firstChild.firstChild.offsetHeight;
}
this.innerHTML = '<span>' + s + '</span>';

if (this.firstChild.offsetHeight > lineHeight) { newLine = true; return false }//换行

totalTdContentWidth += this.firstChild.offsetWidth;
});
if (newLine) return false;
maxTotalTdContnetWidth = Math.max(maxTotalTdContnetWidth, totalTdContentWidth);//获取每行中内容中最大宽度
});

//执行隐藏操作
if (newLine ||//td中出现换行
maxTotalTdContnetWidth > tableWidth - 60//每行总宽度大于table宽度-详细地址宽度
)
$('#mytb tr td:last-child').hide();
</script>


a776135310 2017-08-09
  • 打赏
  • 举报
回复
大神帮帮忙。。。。。。。。

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧