将表格中内容比较长的行截断

本文介绍了一种处理HTML表格中过长内容的方法,通过截断内容并保留其原始样式特性,同时添加了提示标题以展示完整信息。此方法支持嵌套标签,并能保持单元格内容的颜色、字体等属性不变。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

将表格中内容比较长的行截断,加上..., 并以title的方式显示<BR/>
关键是单元中内容的属性不变,如颜色,字体,等等
目前只能支持单元中嵌套一层标签,如
<pre>
< td>< span style="color:#0000FF">HTML IS FUNNY.HTML IS FUNNY.HTML IS FUNNY.HTML IS FUNNY.< /span>< /td>
</pre>
<hr>
<table id=sss border=1>
<tr><td>dddddd</td><td><span style="color:#0000FF">HTML IS FUNNY.HTML IS FUNNY.HTML IS FUNNY.HTML IS FUNNY.</span></td></tr>
<tr><td>122122</td><td>XML IS NOT FUNNY.XML IS NOT FUNNY.XML IS NOT FUNNY.</td></tr>
</table>
<BR/><BR/><BR/>
<script>

g(sss.rows[0].cells[0],10);
g(sss.rows[0].cells[1],15);

g(sss.rows[1].cells[0],10);
g(sss.rows[1].cells[1],12);

function g(gg,l)
{

var ss = gg.innerText;

document.write(ss+";"+ss.length+"<BR/>");

/*
Scripting [ iType = ] object.nodeType
iType Integer that receives one of the following values.
 1 Element node.
 3 Text node.
*/

if (gg.childNodes[0].nodeType==1)
{

if (ss.length>l){
 gg.childNodes[0].childNodes[0].nodeValue = ss.substring(0,l)+"...";
 gg.title = ss;
}
}

if (gg.childNodes[0].nodeType==3)
{

if (ss.length>l){
 gg.childNodes[0].nodeValue = ss.substring(0,l)+"...";
 gg.title = ss;
}
}
}

</script> 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值