bootstrap，jquery利用后台传入的json数据创建动态表格
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>MyJSP'showTeachers.jsp'startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<linkhref="./bootstrap-3.3.5-dist/css/bootstrap.min.css"rel="stylesheet"type="text/css"href="styles.css">
<scriptsrc="js/jquery-2.1.1.min.js"type="text/javascript">
</script>
<scriptsrc="bootstrap-3.3.5-dist/js/bootstrap.min.js"type="text/javascript"></script>
<style>
#edit_teacher{
padding-right:15px;
}
#edit_teacher,#delete_teacher{
cursor:pointer;
display:none;
}
</style>
</head>
<body>
<divclass="container">
<divid="nav_top">
</div>
<divid="table_teacher">
</div>
</div>
<br>
</body>
<scriptlanguage="JavaScript">
var$table=$('<tableclass="tabletable-hover"></table>');
$(document).ready(function(){
$("#nav_top").load("nav/nav_top.jsp");
vars='${json}';
vars=eval("("+s+")");
createTable("table_teacher",s);
});
functioncreateTable(div,s){
//var$table=$('<tableclass="tabletable-hover"id="table_teacher_main"style="table-layout:fixed"></table>');
$("div").append($table);
var$caption=$('<captionstyle="text-align:center;">jquery生成bootstrap表格</caption>');
$table.append($caption);
var$thead=$('<thead></thead>');
var$trs=$('<tr></tr>');
var$th2=$('<th>姓名</th>');
var$th3=$('<th>年龄</th>');
var$th4=$('<th>电话</th>');
var$th5=$('<th>操作</th>');
$trs.append($th2);
$trs.append($th3);
$trs.append($th4);
$trs.append($th5);
$thead.append($trs);
$table.append($thead);
for(varp=0;p<s.length;p++){
create_tbody(s[p].id,s[p].name,s[p].tel_phone);
}
}
functioncreate_tbody(td1,td2,td3){
var$tr=$('<trclass="tr_content"></tr>');
$table.append($tr);
var$td1=$('<tdclass="td_content1">'+td1+'</td>');
$tr.append($td1);
var$td2=$('<tdclass="td_content1">'+td2+'</td>');
$tr.append($td2);
var$td3=$('<tdclass="td_content1">'+td3+'</td>');
$tr.append($td3);
var$td4=$('<tdwidth="10%"></td>');
var$edit=$('<spanclass="text-infoedit_teacher"id="edit_teacher">编辑</span>');
var$delete=$('<spanclass="text-infodelete_teacher"id="delete_teacher">删除</span>');
$td4.append($edit);
$td4.append($delete);
$tr.append($td4);
<spanstyle="color:#009900;">$(document).on("mouseover",".tr_content",function(){
$(this).children().each(function(){
$(this).find("span").show();
});
});
$(document).on("mouseout",".tr_content",function(){
$(this).children().each(function(){
$(this).find("span").hide();
});
});</span>
}
</script>
</html>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
