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

发布时间：2020-08-05 22:05:46 阅读：5487 作者：matengbing 栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

<%@ 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 $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(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>

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

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

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签