bootstrap，jquery利用后台传入的json数据创建动态表格-阿里云开发者社区

bootstrap，jquery利用后台传入的json数据创建动态表格

2017-11-12 1207

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'showTeachers.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" href="styles.css">
<script src="js/jquery-2.1.1.min.js" type="text/javascript">
</script>
<script src="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>
<div class="container">
<div id="nav_top">
</div>
<div id="table_teacher">
</div>
</div>
<br>
</body>
<script language="JavaScript">
var $table=$('<table class="table table-hover"></table>');
$(document).ready(function(){
$("#nav_top").load("nav/nav_top.jsp");
var s='${json}';
var s=eval("("+s+")");
createTable("table_teacher",s);
});
function createTable(div,s){
// var $table=$('<table class="table table-hover " id="table_teacher_main" style="table-layout:fixed"></table>');
$("div").append($table);
var $caption=$('<caption style="text-align:center;">jquery生成bootstrap表格</caption>');
$table.append($caption);
var $thead=$('<thead></thead>');
var $trs=$('<tr></tr>');
var $th1=$('<th>姓名</th>');
var $th2=$('<th>年龄</th>');
var $th3=$('<th>电话</th>');
var $th4=$('<th>操作</th>');
$trs.append($th1);
$trs.append($th2);
$trs.append($th3);
$trs.append($th4);
$thead.append($trs);
$table.append($thead);
for(var p=0;p<s.length;p++){
create_tbody(s[p].id,s[p].name,s[p].tel_phone);
}
}
function create_tbody(td1, td2, td3){
var $tr = $('<tr class="tr_content"></tr>');
$table.append($tr);
var $td1 = $('<td class="td_content1">' + td1 + '</td>');
$tr.append($td1);
var $td2 = $('<td class="td_content1">' + td2 + '</td>');
$tr.append($td2);
var $td3 = $('<td class="td_content1">' + td3 + '</td>');
$tr.append($td3);
var $td4 = $('<td width="10%"></td>');
var $edit = $('<span class="text-info edit_teacher" id="edit_teacher">编辑</span>');
var $delete = $('<span class="text-info delete_teacher" id="delete_teacher">删除</span>');
$td4.append($edit);
$td4.append($delete);
$tr.append($td4);
<span style="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>

本文转自 matengbing 51CTO博客，原文链接:http://blog.51cto.com/matengbing/1874999

bootstrap，jquery利用后台传入的json数据创建动态表格

热门文章

最新文章

相关课程

相关电子书

相关实验场景