jQ&native JavaScript list td text is too long, omit it and customize the title

Effect

Ideas

1. HTML

• Render <table/>the tag and bind the ID or class name to facilitate locating the element, which includes two parts <thead/>: and <tbody>;
• <thead/>Contains <tr><th><tr/>headers for each column of the rendered table;
• <tbody/>The tag only needs to be bound to the ID or class name, and then js is inserted into the html for dynamic rendering.
• Render a custom title box, displayhidden by default.

2. CSS

• Set the td column where the title or school text is too long, overflowbeyond hiding, white-spacecannot wrap, and text-overflowrender ellipses;
• positionSet the position and style of the custom title box

3. JavaScript

• Request to obtain the list data List, traverse the List, set the html of each td and dynamically bind the value, and position and insert tbodythe rendering list
• Bind to listen for hover events mouseoverandmouseout
• mouseoverMove in to determine the relationship between the actual content width and the content visual area width to display the custom title box

Code

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. Request data and dynamically insert rendering

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 +=
                   '<tr id="'+ i +'" style="position: relative;">' +
                       '<td align="center">'+result[i].name+'</td>' +
                       '<td align="center"><img src="'+result[i].icon_img+'" height="60" width="60"></td>' +
                       '<td align="center">'+(result[i].status==1?'啟用':'禁用')+'</td>' +
                       '<td align="center" class="school_div">'+ schoolText +
                   	       '<div class="show_all_schools" >'+ allSchoolHtml +'</div>' +
                       '</td>' +
                       '<td align="center">'+result[i].create_time+'</td>' +
                       '<td align="center">' +
                       '    <div style="height: 20px; bottom: 8px; width: 100px; position: relative;">' +
                       '        <a class="btn btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="zmdi zmdi-more-vert"></i></a>' +
                       '        <ul class="dropdown-menu dropdown-menu-right">' +
                       '             <li><a href="other_set_edit?id='+result[i].id+'"><i class="fa fa-edit"></i> 編輯</a></li>' +
                       '             <li><a href="javascript:void(0);" οnclick="deleteData('+result[i].id+')"><i class="fa fa-trash-o"></i>&nbsp 刪除</a></li>' +
                       '        </ul>' +
                       '     </div>' +
                       '</td>' +
                   '</tr>';
               }
            $('#List').html(str);
        }
    })
}

2. Listen for hover events

$(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"});
    });
});

Knowledge point: The difference between scrollwidth, clientwidth and offsetWidth

• scrollWidth: The width of the actual content of the object, excluding the edge width, will increase as the content in the object exceeds the visible area.
• clientWidth: The width of the visual area of ​​the object content, excluding scroll bars and other edges, will change as the display size of the object changes.
• offsetWidth: The actual width of the entire object, including scroll bars and other edges, will change as the display size of the object changes.