jQuery动态生成引导程序表格

效果图如下所示：

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”UTF-8“% %字符串路径=请求。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“path ”/；%!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML head base href=' %=基路径% ' title my JSP '表。“JSP”起始页/titlemeta http-equiv='pragma '内容=' no-cache ' meta http-equiv=' cache-control '内容=“无缓存”元http-equiv=“过期”内容=' 0 '元http-equiv='关键字'内容='keyword1，keyword2，key- link rel='样式表type=' text/CSS ' href=' style。' CSS '-link href=' bootstrap-3。3 .5-dist/CSS/引导。量滴CSS ' rel='样式表type=' text/CSS ' href=' style。CSS ' script src=' http : js/jquery-2。1 .1 .量滴js ' type=' text/JavaScript '/script script src=' http 3360 bootstrap-3 .}/style/head dydiv class=' container '/div br/body script language=' JavaScript ' $(文档)。ready(function(){ var data=5；createTable(' .容器，数据);});函数createTable(div，data){ var $ table=$(' table class=' table-悬停表-分条表-加边框/table ')；$(“div”).追加($ table)；var $ caption=$(' caption style=' text-align : center；jquery生成引导程序表格/caption ')；$ table。追加($ caption)；var $ thead=$(' thead/thead ')；var $ TRS=$(' tr/tr ')；var $th1=$('th姓名/th ')；var $th2=$('th年龄/th ')；$ TRS。追加($ TH1)；$ TRS。追加(TH2)；$ thead。追加(TRS)；$ table。追加($ thead)；for(var I=0；i10I){ var $ tr=$(' tr class=' tr _ content '/tr ')；$ table。追加($ tr)；var $ td1=$(' TD class=' TD _ content 1 '张三I '/TD ')；$ tr。追加($ td1)；var $ td2=$(' TD class=' TD _ content 2 ' 2 ' I '/TD ')；$ tr。追加($ td2)；$tr.on('点击'，').td_content2 '，function(){ })；} for(var I=0；idataI){ create _ t body()；} $ thread=$('/table ')；}函数create_tbody(){}/script/html