table中td内容过长,则td省略号展示,鼠标单击展示/隐藏剩余内容

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title> 
<style type="text/css">
table .td1-hide{
	list-style:none;
	max-width:100px;
	white-space:nowrap;
	text-overflow:ellipsis; 
	overflow: hidden;
	margin-top:5px; 
}
table .td2-show{
	list-style:none;
	max-width:100px;
	word-break:break-all;
	margin-top:5px;
}
.contain { 
width:900px; 
margin: 15px auto; 
font-family: ‘Microsoft YaHei’; }


table { 
width:100%; 
text-align: center; 
border:1px solid #e3e6e8; 
border-collapse: collapse;
display: table; }
</style>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>  
<body> 
<div class="contain">
 <table>
            <thead>
                <th>电影名称</th>
                <th>猪脚</th>
                <th>编剧</th>
                <th>导演</th>
                <th>电影描述</th>
            </thead>
            <tbody>
                <tr>
                    <td >大内密探001</td>
                    <td>张三</td>
                    <td>李四</td>
                    <td>王五</td>
                    <td name="hideTd">   又是一个有大海的电影。
        印象最深的就是女主角再次面对鲸鱼,那个画面有种说不出的平静与震撼。我第一次见到鲸鱼,是在青岛的极地海洋公园,有个可爱的白鲸主动跟我们合影,第二次就是在斯里兰卡出海,一望无际的海面只有几艘船,突然看到了一头大鲸鱼跃出水面喷水!随着时间流逝,生命总会有别样的精彩。
       其实这部电影更像是在描述男主角的成长。刚开始这个带着小孩,却又玩世不恭,如此乱来的父亲,实在是让人无语。
       但好像时间总是默默的教会一个男孩成长为一个男人。女主因为意外失去了双腿,莫名的和男主产生了微妙的联系。在女主自强拜托阴霾的同时,男孩也学会扛起责任,照顾女主,照顾孩子。
       也许是时间,也许是生活,也许是责任,总有一样,能改变一个人,让他成长</td>
                </tr>
                <tr>
                    <td>大内密探002</td>
                    <td>0.8693</td>
                    <td>0.8894</td>
                    <td>-201</td>
                    <td name="hideTd">   又是一个有大海的电影。
        印象最深的就是女主角再次面对鲸鱼,那个画面有种说不出的平静与震撼。我第一次见到鲸鱼,是在青岛的极地海洋公园,有个可爱的白鲸主动跟我们合影,第二次就是在斯里兰卡出海,一望无际的海面只有几艘船,突然看到了一头大鲸鱼跃出水面喷水!随着时间流逝,生命总会有别样的精彩。
       其实这部电影更像是在描述男主角的成长。刚开始这个带着小孩,却又玩世不恭,如此乱来的父亲,实在是让人无语。
       但好像时间总是默默的教会一个男孩成长为一个男人。女主因为意外失去了双腿,莫名的和男主产生了微妙的联系。在女主自强拜托阴霾的同时,男孩也学会扛起责任,照顾女主,照顾孩子。
       也许是时间,也许是生活,也许是责任,总有一样,能改变一个人,让他成长</td>
                </tr>
                <tr>
                    <td>大内密探003</td>
                    <td>0.8693</td>
                    <td>0.8894</td>
                    <td>-201</td>
                    <td name="hideTd">   又是一个有大海的电影。
        印象最深的就是女主角再次面对鲸鱼,那个画面有种说不出的平静与震撼。我第一次见到鲸鱼,是在青岛的极地海洋公园,有个可爱的白鲸主动跟我们合影,第二次就是在斯里兰卡出海,一望无际的海面只有几艘船,突然看到了一头大鲸鱼跃出水面喷水!随着时间流逝,生命总会有别样的精彩。
       其实这部电影更像是在描述男主角的成长。刚开始这个带着小孩,却又玩世不恭,如此乱来的父亲,实在是让人无语。
       但好像时间总是默默的教会一个男孩成长为一个男人。女主因为意外失去了双腿,莫名的和男主产生了微妙的联系。在女主自强拜托阴霾的同时,男孩也学会扛起责任,照顾女主,照顾孩子。
       也许是时间,也许是生活,也许是责任,总有一样,能改变一个人,让他成长</td>
                </tr>


            </tbody>
        </table>
		</div>
		<script type="text/javascript">


function bindingsClickHide(options){
debugger;
	options.addClass("td1-hide");
	options.click(function(){
	debugger;
		if($(this).attr("class").indexOf("td1-hide") < 0){
		$(this).removeClass("td2-show");
			$(this).addClass("td1-hide");
			  
		}else{
			 $(this).removeClass("td1-hide");
				$(this).addClass("td2-show");
		}
	});
}


bindingsClickHide($("[name = 'hideTd']"));
</script>
</body>
</html>

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页