layui表格展示内容过长，鼠标悬浮显示全部

转载于 2022-07-12 10:43:01 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_41654694/article/details/106273768?spm=1001.2014.3001.5501

文章标签：

#layui #前端 #javascript

本文介绍如何使用JavaScript函数tdTitle()修改表格标题栏和单元格的title属性，实现动态元信息显示。通过table.render()展示了如何在完成后应用此功能，重点关注前端开发中的表格交互细节。

<script> 
function tdTitle() {
        $('th').each(function (index, element) {
            $(element).attr('title', $(element).text());
        });
        $('td').each(function (index, element) {
            $(element).attr('title', $(element).text());
        });
    };

调用刚刚的function
table.render({
  cols:  [[ //标题栏
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用户名', width: 120}
  ]]
  ,done:function(res){
        tdTitle();
    }
});
</script>