js实现html表格<td>标签中带换行的文本显示出换行效果
遇见问题
如下内容中我写了几行,但是表格中并未按行显示,换行符反而变成了空格,于是想自己转换下
思考问题
1、可以看到表格的内容是后端传来的数据,于是想直接在后端转换下,把换行符替换成<br>标签
2、想到就做,如下,写好后一跑,发现,<br>只是显示成了文本,并不会被html识别成标签。。。啪啪啪打脸
3、继续想,准备在数据加载后,在js里面处理下,把文本内容中的换行符转为<br>标签;但是如果一个内容有多行文字,我就要把它拆分为多个小节,<br>好加,但是这些分开的文字怎么连在一起呢,势必还需要继续加标签,那么加什么标签呢?准备加span等等。。
等下,我直接加个p不就行了吗?把原先每一小节的内容放到一个p里。好,就这么干把。。
解决问题
1、首先,网页加载好执行处理函数
$(document).ready(function(){
turnGray(); //完成状态数据背景置灰
replaceBr(); //内容中换行符显示
});
2、处理函数如下
//内容显示换行符
function replaceBr(){
var content = $('.data_table tr td:nth-child(3)');
content.each(function(){
var txt = $(this).text();
var j =0;
var span = document.createElement("span");
for(i=0;i<txt.length;i++){
if(txt.charAt(i)=='\n'){
var p = document.createElement("p");
var partTxt = txt.slice(j,i);
p.innerHTML = partTxt;
//由于p标签内容为空时,页面不显示空行,加一个<br>
if(partTxt==''){
p.appendChild(document.createElement("br"));
}
span.appendChild(p);
j = i + 1;
}
}
var p_end = document.createElement("p");
p_end.innerHTML = txt.slice(j);
$(this).text('');
span.appendChild(p_end);
$(this).append(span);
});
}
3、期间又遇到一个问题,按想象中写好之后执行效果如下:
4、WTF!!我的第四行跑哪去了?F12看了下,第四行的p也是有的啊,好吧,p内容是空它不显示。。。
5、可以看到第2点的代码中标粉色的地方,我给空p加了个br,还是没能绕过br....好吧这下显示正常了
js实现html表格<td>标签中带换行的文本显示出换行效果的更多相关文章
- Dev中控件的js事件代码放在form标签中存在问题
Dev中控件的js事件代码放在form标签中会获取不到(head标签中有其他js代码,未验证是否是这个问题)
- org.dom4j.IllegalAddException: No such namespace prefix: *** is in scope on: org.dom4j.tree.DefaultElement (dom4j写入XML文件,标签中带【:】(冒号)解决办法)
用dom4j操作写XML文件,标签中含有冒号,会报 org.dom4j.IllegalAddException: No such namespace prefix: *** is in scope o ...
- 求出数组中所有数字的和&&弹出层效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- checkeds 选中获取tbale表格中某一列td标签中的值
例如: var checkedbox = $("input[type=checkbox][name='cid']:checked") if (checkedbox.size( ...
- 在IE6/7下表格td标签没有内容时不显示边框?
有以下几种方法: 1.在单元格中加入一个空格.这样: <td> </td> 2.直接在table里这样写:<table border="0" cell ...
- 表格td标签在不添加多余标签的情况下实现文本内容单行显示,多余部分省略号表示的方法
#table { table-layout: fixed; } .content { white-space: nowrap; text-overflow: ellipsis; -o-text-ove ...
- iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果
具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...
- 设置表格td超出内容后截取并以...显示
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } <table style=" ...
- 关于table表格td里内容是数字而且太长不换行的问题
<p>table{table-layout:fixed}</p><p>table td{word-wrap:break-word}</p><p&g ...
随机推荐
- 实现:创建/复制/移动文件API
使用的API: 1.DeleteFile DeleteFileW( _In_ LPCWSTR lpFileName ); 2.CopyFile CopyFileW( _In_ LPCWSTR lpEx ...
- linux学习16 Linux用户和组管理命令演练和实战应用
一.上集回顾 1.bash globing,IO重定向及管道 glob:*,?,[],[^] IO重定向: >,>>, 2>,2>> &>,& ...
- haproxy2.0 dataplaneapi 简单说明
haproxy2.0 支持基于dataplaneapi 的haproxy 动态配置修改以及服务生效,早期大家为了动态 可以会基于dsn 的服务发现模式,基于confd 结合consul 动态生成配置并 ...
- JS对象创建模式
JS的对象创建模式 1.Object构造函数模式 var person = new Object(); person.name = 'name'; person.age = 43; console.l ...
- C++ Boost
Boost库是一个可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一. Boost库由C++标准委员会库工作组成员发起,其中有些内容有望成为下一代C++标准库内容.在C+ ...
- 某神奇的cf跳转插件
// ==UserScript== // @name Codeforces快速跳转菜单 // @namespace http://tampermonkey.net/ // @version 2019. ...
- VS2017 远程调试linux(centos).net core程序(通过附加程序的方式)
参考两位大神的帖子: https://blog.csdn.net/soband_xiang/article/details/82914195 https://blog.csdn.net/weixin_ ...
- 在vb.net中使用委托:经理 和 员工
现在开发的一个 vb.net系统,其中有两个窗体:alert窗体和 case窗体. 在alert窗体中列出了当前可以操作的若干个alert(可以理解为数据记录),用户可以选择将其中一个或几个alert ...
- linux 搭建局域网YUM源仓库服务器
yum简介 Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服 ...
- IO多路复用之select poll epoll
参考文档: http://blog.csdn.net/tennysonsky/article/details/45745887 select(),poll(),epoll()都是I/O多路复用的机制. ...