js将数据表格字符串太长处理为省略符

处理后效果
在这里插入图片描述

html原始数据:

<style type="text/css">
	/*   .word_tolong_limit 文本超长限制, */
	.word_limit { /*width: 30em; */cursor:pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
</style>

 <tr articleIds="40019413853863936" depId="0443fea5641a453780e2e2780f2ff5b3">
		<td word_set="limit:15">whl,多文件测试2023-4-21A 10:20:47---1</td>
		<td>超级管理员</td>
		<td word_set="limit:9">勘探项目管理三部</td>
		<td word_set="limit:10">武松(财务科),李世民(计划财务科),陈成思(人事科)</td>
		<td word_set="limit:10" title="报送栏目">摄影作品</td>
</tr>

使用limit:15这个控制显示最大字符数,15表示最多显示多少字,多的字用省略符。
处理的js代码,在鼠标点击单元格时,弹出单元格原本的所有数据内容

!function () {
    /* 处理表格里面,字符太多,用省略符,点击显示所有文本。
         */
      $("[word_set]").each(function (index, elem) {
          var contentHtml = $(elem).html();
          /**属性值设置举例: limit:15;color:red;*/
          var setOptions = $(elem).attr('word_set');
          if (setOptions == null || setOptions == "") {
              return true;
          }
          /* 读取limit设置的字符长度*/
          var wordLengLimit = 20;
          var regex2 = new RegExp(/(?<=limit\s*:\s*)\d+/, "i");
          var arr = regex2.exec(setOptions);
          if (arr.length>0) {
              wordLengLimit = arr[0];
          }
          var content = $(elem).text();
          if (content.length < wordLengLimit) {
              return true;
          } 
          content = content.trim();

          var regex5 = new RegExp("<br/>", "g"); 
          var html2 = contentHtml.replace(regex5, " ");

          var regex3 = new RegExp("<br>", "g");              
          html2 = html2.replace(regex3, " ");
          //console.log(997,html2);        
         
          $(elem).html("<div class=\"word_limit\" style=\"width: " + wordLengLimit + "em; \">" + html2 + "</div>"); 
          
          if (content != null && content.length > 9) {
              /** 点击显示所有文本 */
              $(elem).click(function () {
                  //var txt2 = $(this).html();
                  alert(contentHtml);
              });
          }
      });

}();
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
如果要对表格数据进行省略显示,并在鼠标移入时弹出弹窗显示全部内容,可以使用以下方法: 1. 在全局中定义一个自定义方法,用于对表格中的数据进行省略处理。例如: ```javascript Vue.filter('ellipsis', function(value, maxLength) { if (value.length > maxLength) { return value.slice(0, maxLength) + '...'; } else { return value; } }); ``` 这个自定义方法可以将字符串截取到指定的长度,然后在末尾添加省略号。 2. 在表格中使用这个自定义方法进行数据处理。例如: ```html <el-table-column prop="desc" label="描述"> <template slot-scope="scope"> <span v-bind:title="scope.row.desc">{{ scope.row.desc | ellipsis(10) }}</span> </template> </el-table-column> ``` 这里使用了 `v-bind:title` 将原始的数据绑定到了 `title` 属性上,这样当鼠标移入时就可以显示全部内容。 3. 在鼠标移入时显示弹窗。可以使用 `@mouseenter` 事件监听器来监听鼠标移入事件,然后在回调函数中显示弹窗。例如: ```html <el-table-column prop="desc" label="描述"> <template slot-scope="scope"> <span v-bind:title="scope.row.desc" @mouseenter="showPopup(scope.row.desc)">{{ scope.row.desc | ellipsis(10) }}</span> </template> </el-table-column> ``` 在这个例子中,我们定义了一个 `showPopup` 方法来显示弹窗,并将原始数据作为参数传递给这个方法。 需要注意的是,弹窗的显示和隐藏需要根据实际情况进行设置,可以使用 CSS 样式或 JavaScript 控制来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王焜棟琦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值