在一个表格里,超过一定宽度字符串进行截取显示点点,鼠标移上去显示全

<table  style="width:100%" >
                            <tr>
                                <th  style="width:30%">相关通用药物分类</th>
                                <th  style="width:35%">用药目的(非交集用颜色区分)</th>
                                <th  style="width:15%">交集类别</th>
                                 <th  style="width:15%">操作</th>
                            </tr>
                          <tr>
                              <td field="name"><div class="z_cutout">xxxxxxxxxxxxxxxxxxxxxsssxxxxxxxxxxxxxxxxxxxxssssssssssss</div></td>
                              <td field="jindu">xxx</td>                          
                              <td field="time">包含</td>
                              <td field="opear">
                                 <a href="#" class="z_a">删除关联</a>
                              </td>
                          </tr>
                          <tr>
                              <td field="name"><div class="z_cutout">xxxxxxxxxxxxxxxxxxxxxsssxxxxxxxxxxxxxxxxxxxxssssssssssss</div></td>
                              <td field="jindu">xxx</td>                          
                              <td field="time">包含</td>
                              <td field="opear">
                                 <a href="#" class="z_a">删除关联</a>
                              </td>
                          </tr>

</table>

$(function(){
            $(".z_cutout").each(function(i) {
                if($(this).text().length>10){
                    $(this).attr("title",$(this).text());
                    var text = $(this).text().substring(0,10)+"...";
                    $(this).text(text);
                }
            });
            
            $(".z_cutout").mouseenter(function()
                { //鼠标移入
                    var title  = $(this).attr("title");
                    $(this).text(title);
                }).mouseleave(function()
                { //鼠标移出
                    if($(this).text().length>10){
                    var text = $(this).text().substring(0,10)+"...";
                    $(this).text(text);
                   }
                });
        });

时间: 2024-08-25 02:38:20

在一个表格里,超过一定宽度字符串进行截取显示点点,鼠标移上去显示全的相关文章

实现当鼠标移到表格上时显示这一格的全部内容

想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢.想实现当鼠标移上去的时候可以显示这一行被隐藏的内容.当然这个网上有很多插件,但是我没有用,还是自己写了一个. css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "微软雅黑"; border: 1px solid #3c8dbc; display: none;

把字符串输入到表格里

在格子中输出字符串 在格子中显示 用户输入一个字符串,把它显示在格子中. 要求: 水平左对齐,垂直顶端对齐. 格子的宽度和高度是先定好的,比如:30 x 7 如果字符串太长,则需要折行显示. 如果实在太长,到最后一行都装不下,则截断它,使之不破坏格子边框. 可能的情景: 情景1 情景2 我们可以定义一个大的字符型数组 char[][] cc,该数组的范围就是表格的大小. 先把数组的四个角赋值为 '+',第一行最后一行的其他位置赋值为 '-',第一列和最后一列赋值为 '|'.这样,表格的框架就打好

table表格宽带研究(附带:table表格为什么设置td宽度无效)

情况1:下面代码定义了表格宽带为为600px,未设置td宽带,3个td内容为1,2,3,可以看到3个内容平分table的宽度. 也就是每个td都是200px(请注意:如果用chrome调试宽度,会有一定的误差,因为600px还包括边框,因此实际宽度可能是198px,这里进行了简化,下同). <table style="width:600px; background-color:red" > <tr> <td>1</td> <td&g

【ThinkingInC++】43、内建类型封装在一个类里

内建类型 C++数据类型包括: 1)内置的基本数据类型,如整型.浮点型.布尔型等,均有一个关键字对应,如int,float,bool 2)C++ STL(标准库)引入了一些扩展类型,有时候也归为基本类型,比如字符串类型(string),复数类型(complex),向量(vector)等. 3)其他,即用户自定义类型,也叫抽象数据类型(ADT),即用户通过class,struct,enum定义的各种数据类型. /** * 书本:[ThinkingInC++] * 功能:把一个内建类型封装在一个类里

在一个DIV里两边是文字块,中间是图片怎么样用最少的浮动来合理布局?

我们经常会遇到这样的情况,在一个容器里,我们可能需要中间展示图片而左右是文字块.那么我们如何用最少的浮动来达到这个效果呢? 因为img 是一个特殊元素,它不属于块元素也不属于内联元素.所以经过尝试,发现了以下办法. <div class=box> <img src="http://s0.hao123img.com/res/img/logo/logonew1.png" > <div> right胡凤莲家距县城几十公里,其中有一段山路没有班车,只能跪着行

移动端图片超过屏幕宽度处理办法

在手机端网页开发时: 有时候我们不希望图片宽度超过屏幕宽度 因为图片太宽会出现滚动条,滚动条是手机端网页的大忌. 解决办法: img{max-width:100%;!important} 这样即使图片再大也不会因为宽度而超过屏幕的宽度.

linux查找文件夹下的全部文件里是否含有某个字符串

查找文件夹下的全部文件里是否含有某个字符串 find .|xargs grep -ri "IBM" 查找文件夹下的全部文件里是否含有某个字符串,而且仅仅打印出文件名称 find .|xargs grep -ri "IBM" -l 1.正則表達式 (1)正則表達式一般用来描写叙述文本模式的特殊使用方法,由普通字符(比如字符a-z)以及特殊字符(称为元字符.如/.*.?等)组成. (2)基本元字符集及其含义 ^ :仅仅匹配行首. 如^a 匹配以a开头的行abc,a2e,

&lt;转载&gt;使用css让大图片不超过网页宽度

让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度! 接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问题. 图片撑破布局原因1.由于浏览器版本低(微软IE6)2.没有设置div布局的宽度 解决图片超出宽度或撑破div css布局方法1.在文章中发布图片的时候将图片编辑缩小2.通过对对应div的css来设置显示的图片最宽宽度 推荐3.通过css对图片设定宽度. 通过css来解决图片撑破div布局案例通

图片超过DIV宽度自适应

.main_con img { max-width: 610px; height: auto; cursor: pointer; border: 0px double #cccccc; padding: 2px; zoom: expression( function(elm) { if (elm.width>610) { var oldVW = elm.width; elm.width=610; elm.height = elm.height*(610 /oldVW); } elm.style.