首页 > 其他分享> > jquery完成bootstrap动态表格

jquery完成bootstrap动态表格

2019-04-14 15:55:26 作者：互联网

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

标签：jquery,function,表格,bootstrap,tr,var,table,trs,append
来源： https://blog.51cto.com/14226273/2378480