jQ&原生JavaScript列表td文本过长省略并自定义title

jQ&原生JavaScript列表td文本过长省略并自定义title

  • 效果
  • 思路
  • 代码实现
  • 知识点:scrollwidth、clientwidth与offsetWidth的区别

效果

jQ&原生JavaScript列表td文本过长省略并自定义title_第1张图片

思路

  1. HTML
  • 渲染标签并绑定ID或类名便于定位元素,里面包括两大部分;
  • 包含渲染表格的每列的标题;
  • 的标签则只需绑定ID或类名,后面js插入html动态渲染。
  • 渲染自定义title盒子,默认display隐藏。
    1. CSS
    • 设置标题或者学校这列文本超长的td列,overflow超出隐藏、 white-space不能换行、text-overflow渲染省略号;
    • 设置自定义title盒子的position位置以及样式
    1. JavaScript
    • 请求获取列表数据List,遍历List,设置每项td的html并动态绑定值,并定位插入tbody渲染列表
    • 绑定监听hover事件mouseovermouseout
    • mouseover移入判断实际内容宽度 与 内容可视区宽度的关系 来展示自定义title盒子

    代码实现

    HTML

    <%--表格--%>
    <table class="table table-hover" id="table" >
         <thead>
             <tr>
                 <th style="text-align: center;" width="10%">名稱th>
                 <th style="text-align: center;" width="10%">圖標th>
                 <th style="text-align: center;" width="10%">狀態th>
                 <th style="text-align: center;" width="20%">選取學校th>
                 <th style="text-align: center;" width="10%">創建時間th>
                 <th style="text-align: center;" width="10%">操作th>
             tr>
         thead>
         <tbody id="List">
         tbody>
     table>
    

    CSS

     .table{
         table-layout: fixed;
     }
     // 文本超出省略
     .school_div{
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         cursor: pointer;
     }
     // 自定义title盒子
     .show_all_schools{
         position: absolute;
         top: 85px;
         z-index:999;
         background:#fff;
         min-width: 300px;
         min-height: 100px;
         max-height: 400px;
         padding: 10px;
         overflow:auto;
         border-radius: 5px;
         border:1px solid #e1e1e1;
         display: none;
     }
    

    JavaScript

    1. 请求数据并动态插入渲染
    function getData(pageNo){
        $.ajax({
            url:'/xxx/list',
            type:'post',
            data:{
                page_no:pageNo,
                keyWord:$('#keyWord').val()
            },
            success:function(res){
                if(res.code=='200'){
                   var str = '';
                   var result = res.data.results;
                   for(var i=0;i<result.length;i++){
                       var schoolname = result[i].school_names == '' ? [] : result[i].school_names.split(",")
                       let schoolText='';
                       let allSchoolHtml = '';
                       for(let l=0;l<schoolname.length;l++){
                           schoolText+= schoolname[l];
                           allSchoolHtml += `<p>${schoolname[y]}</p>;
                       }
                       str +=
                       '
    + i +'" style="position: relative;">' + '' + '' + '' + '' + '' + '' + ''; } $('#List').html(str); } }) }
    1. 监听hover事件
    $(function (){
    	getData(1);
        // 监听选取学校hover事件
        $("#table").on('mouseover ','.school_div',function (){
            if (this.scrollWidth > this.clientWidth) {
                $(this).children('.show_all_schools').css({"display":"block"})
            }
        });
        $("#table").on('mouseout ','.school_div',function (){
            $(this).children('.show_all_schools').css({"display":"none"});
        });
    });
    

    知识点:scrollwidth、clientwidth与offsetWidth的区别

    • scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
    • clientWidth:对象内容的可视区的宽度,不包滚动条等边线会随对象显示大小的变化而改变。
    • offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。

    jQ&原生JavaScript列表td文本过长省略并自定义title_第2张图片

    你可能感兴趣的:(javascript,css,html,jquery)

    '+result[i].name+'+result[i].icon_img+'" height="60" width="60">'+(result[i].status==1?'啟用':'禁用')+''+ schoolText + '
    '+ allSchoolHtml +'
    '
    + '
    '+result[i].create_time+'' + '
    ' + ' ' + ' ' + '
    '
    + '