jQuery动态生成Bootstrap表格

时间：2021-05-26

效果图如下所示：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'table.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>tr:hover{cursor:pointer;}</style></head><body><div class="container"></div><br></body><script language="JavaScript">$(document).ready(function(){var data=5;createTable(".container",data);});function createTable(div,data){var $table=$('<table class="table table-hover table-striped table-bordered"></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>');$trs.append($th1);$trs.append($th2);$thead.append($trs);$table.append($thead);for(var i=0;i<10;i++){var $tr=$('<tr class="tr_content"></tr>');$table.append($tr);var $td1=$('<td class="td_content1">张三'+i+'</td>');$tr.append($td1);var $td2=$('<td class="td_content2">2'+i+'</td>');$tr.append($td2);$tr.on("click",".td_content2",function(){});}for(var i=0;i<data;i++){create_tbody();}$thread=$('</table>');}function create_tbody(){}</script></html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章