<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
initData();
})
function initData() {
$("input[id*=input_]").each(function(){
var id = $(this).attr("id").split("_")[1];
var name = $(this).val();
$("#name_"+id).prepend(name.length>15?name.substring(0,15):name);
if(name.length>15){
$("#show_"+id).show();
}
})
}
function showName(id) {
var name=$("#input_"+id).val();
$("#name_"+id).html("");
$("#name_"+id).html(name);
$("#show_"+id).hide();
$("#hide_"+id).show();
}
function hideName(id){
var name=$("#input_"+id).val();
$("#name_"+id).html("");
$("#name_"+id).html(name.length>15?name.substring(0,15):name);
$("#show_"+id).show();
$("#hide_"+id).hide();
}
</script>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1" align="center">
<thead>
<th>序号</th>
<th>名称</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="hidden" id="input_1" value="我们都是好孩子，最最可爱的孩子，天真无邪一辈子">
<div id="name_1" style="float:left">
</div>
<span style="display: none" id="show_1" οnclick="showName(1)">>>></span>
<span style="display: none" id="hide_1" οnclick="hideName(1)"><<<</span>
</td>
<td>10</td>
</tr><tr>
<td>2</td>
<td>
<input type="hidden" id="input_2" value="最美的是你眼里的我">
<div id="name_2" style="float: left">
</div>
<span style="display: none" id="show_2" οnclick="showName(2)">>>></span>
<span style="display: none" id="hide_2" οnclick="hideName(2)"><<<</span>
</td>
<td>20</td>
</tr><tr>
<td>3</td>
<td>
<input type="hidden" id="input_3" value="我们不一样不一样， 每个人有不同的际遇，我们在这里，在这里等你">
<div id="name_3" style="float:left">
</div>
<span style="display: none" id="show_3" οnclick="showName(3)">>>></span>
<span style="display: none" id="hide_3" οnclick="hideName(3)"><<<</span>
</td>
<td>30</td>
</tr>
</tbody>
</table>
</body>
</html>
扫一扫
285
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
