14285人阅读
javascript（5）
首先在jsp页面设定一个table骨架,首先把该table的display属性设置为none，这样在加载页面的时候就不会显示出来，代码如下
&table id=&generatedTable& style =&border=2; display:&&
&th style='width:10%;'&第一列&/th&
&th style='width:15%;'&第二列&/th&
&th style='width:10%;'&第三列&/th&
&th style='width:10%;'&第四列&/th&
&th style='width:3%;'&第五列&/th&
&tr id=&cloneTr&&
然后根据这个骨架用ajax来把动态生成table的各个行，并把后台数据添加到table中
ajaxPost({
type:&GET&,
url:&&c:url value='/logDetails.auth'/&&,
data:&datas=&+//要发送的数据
//object是后台传过来的java list数据集合
success:function(objects){                       
                     
//1,获取上面id为cloneTr的tr元素
                    
var tr = $(&#cloneTr&);
                  
$.each(objects, function(index,item){                            
                         
//克隆tr，每次遍历都可以产生新的tr                            
                            
var clonedTr = tr.clone();
                            
var _index =
                            
                            
//循环遍历cloneTr的每一个td元素，并赋值
                            
clonedTr.children(&td&).each(function(inner_index){
                                
                              
 //根据索引为每一个td赋值
                             
   switch(inner_index){
                                    
                                      
 $(this).html(_index + 1);
                                    
   
                                  
 case(1):
                                  
     $(this).html(item.caller);
                                  
    
                                 
                                     
  $(this).html(item.imsi);
                                     
                                 
  case(3):
                                      
$(this).html(item.imei);
                                      
                                  
 case(4):
                                      
$(this).html(item.osid);
                                      
                             
                             
 }//end switch                       
                            });//end children.each
                        
                           //把克隆好的tr追加原来的tr后面
                           clonedTr.insertAfter(tr);
                        });//end $each
                        $(&#cloneTr&).hide();//隐藏id=clone的tr，因为该tr中的td没有数据，不隐藏起来会在生成的table第一行显示一个空行
                        $(&#generatedTable&).show();
         }//end success
    });//end ajaxpost                        
              
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：561051次
积分：6014
积分：6014
排名：第2723名
原创：164篇
转载：16篇
评论：190条
阅读：9448
文章：12篇
阅读：25527
(4)(2)(1)(2)(4)(7)(5)(2)(7)(2)(1)(2)(6)(2)(2)(1)(2)(2)(2)(1)(2)(3)(1)(7)(2)(1)(1)(1)(4)(3)(2)(1)(9)(11)(4)(10)(1)(15)(10)(3)(3)(10)(1)(6)(1)(1)(1)(5)(2)(1)(1)jQuery动态添加删除与添加表行代码
jQuery动态添加删除与添加表行代码
| 时间： 20:24:58 | 阅读数：
[导读] 由于项目的需要，需要动态的添加和删除table中的tr，想相，感觉用JS可以实现，但是在网上找了一下，单纯的自己写JS，感觉太麻烦，而且也不好维护。于是想到了最近学的jQuery。具体实现代码如下：table的HTML如下
由于项目的需要，需要动态的添加和删除table中的tr，想相，感觉用JS可以实现，但是在网上找了一下，单纯的自己写JS，感觉太麻烦，而且也不好维护。于是想到了最近学的jQuery。
具体实现代码如下：table的HTML如下：
&input type=&button& value=&添加一行& /&&table&&tr&&td&&input type=&button& class = &del& value=&删除该行&/&&/td&&/tr&&/table&
添加行的jQuery代码如下：
$(function(){$(&tr&).last().after(&&tr&&td&&input type=&button& class = &del& value=&删除该行&/&&/td&&/tr&&);})
删除代码如下：$(this).parents(&tr&).remove();上面代码感觉不合理也有不兼容我们可以稍加修改增加的代码如下
function&& AddRow(){ &&&&&&&&&&&&& var vTb=$(&#TbData&);//得到表格ID=TbData的对象&&&&&&& &&&&&&&&&&&&& //所有的数据行有一个.CaseRow的Class,得到数据行的大小 &&&&&&&&&&&&& var vNum=$(&#TbData tr&).filter(&.CaseRow&).size()+1;//表格有多少个数据行& &&&&&&&&&&&&& var vTr=$(&#TbData #trDataRow1&); //得到表格中的第一行数据&&&&&&&&& &&&&&&&&&&&&& var vTrClone=vTr.clone(true);//创建第一行的副本对象vTrClone &&&&&&&&&&&&& vTrClone[0].id=&trDataRow&+vN//设置 第一个Id?榈鼻盎袢∷饕?环乐怪匮}添加多个ID??rDataRow1的数据行；一次添加一个； &&&&&&&&&&&&& vTrClone.appendTo(vTb);//把副本单元格对象添加到表格下方&&&&&&&&& &&&&&& }&&&
删除的代码如下&&
&& var vNum=$(&#TbData tr&).filter(&.CaseRow&).size()+1;//表格有多少个数据行; &&&&&&&&&&&&& if(vNum&=2) &&&&&&&&&&&&& { &&&&&&&&&&&&&&&&&& alert('请至少留一行'); &&&&&&&&&&&&&&&&&& &&&&&&&&&&&&& }&&&&&&&& &&&&&&&&&&&&& var vbtnDel=$(this);//得到点击的按钮对象&&&&&&&&&&&& &&&&&&&&&&&&& var vTr=vbtnDel.parent(&td&).parent(&tr&);//得到父tr对象;&&&&&&&&&&&&&&& &&&&&&&&&&&&& if(vTr.attr(&id&)==&trDataRow1&) &&&&&&&&&&&&& { &&&&&&&&&&&&&&&& alert('第一行不能删除!'); //第一行是克隆的基础，不能删除 &&&&&&&&&&&&&&&& &&&&&&&&&&&&& }else{ &&&&&&&&&&&&&&& vTr.remove();& &&&&&&&&&&&&& }
下面我们写一个完整的按行实现添加，删除，并在删除后，动态实现下在参考
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&html xmlns=&http://www.w3.org/1999/xhtml&&&head&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&script type=&text/& src=&jquery-1.3.1.js&&&/script&&title&demo about table&/title&&script&jQuery(function($){&& //添加行&&& $(&#add1&).click(function(){&&&&&&& $(&#table2&tbody&).append('&tr&&td&新增1&/td&&td&&button onclick=&deltr(this)&&删除&/button&&/td&&/tr&')&& });});//删除行的函数，必须要放domready函数外面function deltr(delbtn){&&& $(delbtn).parents(&tr&).remove();};jQuery(function($){&& //定义删除按钮事件绑定&& //写里边，防止污染全局命名空间&& function deltr(){&&&&&&& $(this).parents(&tr&).remove();&& };&& //已有删除按钮初始化绑定删除事件&&& $(&#table2 .del&).click(deltr);&& //添加行&&& $(&#add2&).click(function(){&&&&&&& $('&tr&&td&新增行2&/td&&td&&button class=&del&&删除&/button&&/td&&/tr&')&&&&&&&&&& //在这里给删除按钮再次绑定事件。&&&&&&&&&&& .find(&.del&).click(deltr).end()&&&&&&&&&&& .appendTo($(&#table2&tbody&));&& });});jQuery(function($){&& //第四个表格的删除按钮事件绑定&&& $(&#table2&).click(function(e) {&&&&&& if (e.target.className==&del&){&&&&&&&&&&& $(e.target).parents(&tr&).remove();&&&&&& };&& });&& //第四个表格的添加按钮事件绑定&&& $(&#add3&).click(function(){&&&&&&& $(&#table2&tbody&).append('&tr&&td&新增行3&/td&&td&&button class=&del&&删除&/button&&/td&&/tr&')&& });});&/script&&/head&&body&&br/&&table id=&table2&&&&& &tbody&&&&&&&& &tr&&&&&&&&&&&& &td&这行原来就有&/td&&&&&&&&&&&& &td&&buttonclass=&del&&删除&/button&&/td&&&&&&&& &/tr&&&&&&&& &tr&&&&&&&&&&&& &td&这行原来就有&/td&&&&&&&&&&&& &td&&buttonclass=&del&&删除&/button&&/td&&&&&&&& &/tr&&&& &/tbody&&/table&&input type=&button& name=&add1& id=&add1& value=&新增1&/&&input type=&button& name=&add2& id=&add2& value=&新增2&/&&input type=&button& name=&add3& id=&add3& value=&新增3&/&&/body&&/html&
手机扫描下方二维码，关注php100官方微信。
同步官网每日更新，为您带来随时随地的资讯与技术信息。更有不定期的互动抽奖活动，赢取实用贴心的小礼物。
除非特别声明，PHP100新闻均为原创或投稿报道，转载请注明作者及原文链接原文地址：
友情链接与合作伙伴
粤ICP备号-3jQuery ajax 动态append创建表格出现不兼容ie8 - 推酷
jQuery ajax 动态append创建表格出现不兼容ie8
很多情况下，通过js（jQuery1.10）动态来创建一些样式，对页面的动态交互来说是很方便的
但是不同的浏览器针对动态生成的不是很兼容，在此遇见的不兼容ie8，跟各位分享下
& & &json数据
[{&name&:&ajax&,&job&:&manong&},{&name&:&js&,&job&:&diaosi&}]
&table class=&ajaxappend&&
& & & &&tbody&&/tbody&
$document.ready(function(){
& & & & & & & & type:&post&,
success:function(data){
$(&.ajaxappend tbody&).append(&&t
$(&.ajaxappend thead&).append(&&th&name&/th&&);
$(&.ajaxappend thead&).append(&&th&
$(&.ajaxappend tbody&).append(&&
for(int i = 0,l = data. i & i = i+1){
$(&.ajaxappend tbody&).append(&&t
for(var key in data[i]){
$(&.ajaxappend tbody&).append(&&td&&+data[i][key]+&&/td&&);
$(&.ajaxappend tbody&).append(&&
上面的效果在火狐下是能够正常动态生成出表格的
但是在ie8却不行，经过几次验证，推测，ie对动态append的内容有要求，需要将一个具有完整意义的html一起append到代码中
$document.ready(function(){
& & & & & & & & type:&post&,
success:function(data){
&= head + &&tr&&th&name&/th&&th&job&/th&&/tr&&;
for(int i = 0,l = data. i & i = i+1){
& & & & & & & & & & & & & & & &&
= body + “&tr&&;
for(var key in data[i]){
+&&&td&&+data[i][key]+&&/td&&;
+ &&/tr&&; & & & &
$(&.ajaxappend tbody&).append(
这样ie8和火狐下都可以正常显示了
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致treetable jquery的一种多级树形表格，支持ajax动态加载
238万源代码下载-
&文件名称: treetable
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 15 KB
&&上传时间:
&&下载次数: 76
&&提 供 者:
&详细说明：jquery的一种多级树形表格，支持ajax动态加载-the jquery of a multi-level tree form support ajax dynamic loading
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&多级树形表格&&............\demo.html&&............\js&&............\..\treeTable_split.js&&............\..\复件 treeTable_split.js&&............\reset.css&&............\skins&&............\.....\style.css&&............\.....\table&&............\.....\.....\ajax-loader.gif&&............\.....\.....\bullet_toggle_minus.gif&&............\.....\.....\bullet_toggle_plus.gif&&............\.....\.....\folder.gif&&............\.....\.....\page.gif&&............\.....\.....\Thumbs.db&&............\.....\.....\th_bg.jpg&&............\xmlData&&............\.......\table3.html&&............\.......\table4.html&&............\.......\table5.html&&............\.......\table6.html
&近期下载过的用户:
&相关搜索:
&输入关键字，在本站238万海量源码库中尽情搜索：
&[] - ssh2用户管理系统，实现增删该查，使用mysql数据库，有状态控制
&[] - 一款自己写的利用jquery实现的树形表格，可以lazy
&[] - 树形表格控件。官网：/docs/products/dhtmlxTreeGrid/index.shtml。这是09年的 2.1 版本。
包内的 demo 目录下有17个示范，包含动态加载、搜索过滤、分页等。
&[] - 展示树控件，实现下拉，拖拽、添加、删除等功能。
&[] - JQUERY的强大表格JQGrid的示例代码，演示各种功能和数据处理方法
&[] - tabletree表格树形，支持右键菜单
&[] - java 实现的treetable,只需简单的处理一下数据。就能够实现
&[] - js树形菜单,ajax加载数据，右键菜单功能，动态添加、删除节点，以及菜单重命名。
&[] - 动态加载树,jquery ztree,【修改】由于 jquery 1.9 中移除 event.srcElement 导致的 js 报错的bug。
* 【修改】在异步加载模式下，使用 moveNode 方法，且 moveType != "inner" 时，也会导致 targetNode 自动加
&[] - EXTJS(Javascript类库)的帮助文档jQuery Ajax Servlet JSON（Struts2）动态生成table_Linux编程_Linux公社-Linux系统门户网站
你好，游客
jQuery Ajax Servlet JSON（Struts2）动态生成table
来源：Linux社区&
jsp 页面代码：table 用div包裹住$("#div_tb table").remove(); 移除div里面的table 然后再加入table&servlet 与struts2一样的道理只是配置文件不一样
========================分割线========================
推荐阅读：
jQuery权威指南 PDF版中文+配套源代码
jQuery实战 中文PDF+源码
《jQuery即学即用（双色）》 PDF+源代码
锋利的jQuery(第2版) 完整版PDF+源码
jQuery完成带复选框的表格行高亮显示
jQuery基础教程(第4版) PDF 完整高清版+配套源码
========================分割线========================&点击查看struts2写的级联下拉框
&%@ 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&&
&base href="&%=basePath%&"&& &
&title&列表&/title&& &
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&&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"&&&script type="text/javascript" src="jquery/jquery-1.9.1.js"&&/script&&!--jquery自己导入--&&&script type="text/javascript" src="jquery/jquery-1.9.1.min.js"&&/script&&&link rel="stylesheet" type="text/css" href="css/itemListStyle.css"&&!--CSS 自己设置--&&&script type="text/javascript"&&function getList(){&var sel_val =$("#sel_itemGroup").val();&jQuery.ajax({&
&url : "getList",& & &data : {key: sel_val},&type : "post",&
&cache : false,&
&dataType : "json",&
&success:callback& &
&});&}&function callback(json) {&if(json.length==0){&$("#div_tb table").remove();&var new_table="&table id='listTable'&"+&"&tr&&td id='td4' width='15%'&序号&/td&"+&"&td id='td4' width='25%'&检测项描述&/td&"+&"&td id='td4' width='20%'&传感器类型&/td&"+&"&td id='td4' width='20%'&监测项ID&/td&"+&"&td id='td4' width='20%'&操作&/td&&/tr&"+&"&tr&&td colspan='5'&&font color='red'&"+&"该站点没有传感器或者加载数据出错.....&/font&&/td&&/tr&&/table&";&$("#div_tb").append(new_table);&}else{&$("#div_tb table").remove();&var new_table="&table id='listTable'&"+&"&tr&&td id='td4' width='15%'&序号&/td&"+&"&td id='td4' width='25%'&检测项描述&/td&"+&"&td id='td4' width='20%'&传感器类型&/td&"+&"&td id='td4' width='20%'&监测项ID&/td&"+&"&td id='td4' width='20%'&操作&/td&&/tr&&/table&";&$("#div_tb").append(new_table);&var tb = $("#listTable");&&for(var i=0;i&json.i++){&if(i%2==0){&str = "&tr style='background-color:#D8EFFF'&&td&" + (i + 1) + "&/td&&td&" + json[i].itemName&+ "&/td&&td&" + json[i].model + "&/td&&td&"&+ json[i].itemKey + "&/td&&td&"&+ "&a&删除&/a&　| &a&编辑&/a&" + "&/td&&/tr&";&}else{&str = "&tr&&td&" + (i + 1) + "&/td&&td&" + json[i].itemName&+ "&/td&&td&" + json[i].model + "&/td&&td&"&+ json[i].itemKey + "&/td&&td&"&+ "&a&删除&/a&　| &a&编辑&/a&" + "&/td&&/tr&";&}&tb.append(str);&}&}&}&$(function() {&$("#sel_itemGroup").change(getList);&});&&/script&&
&/head&&&body&&&center&&&form id="myform" action="AC86RegisterAction" method="post"&&&div&&&table id="listTable1"&&&tr&&&td align="left" &&&select class="selectWidth" id="sel_itemGroup"&&&option value="1"&站点1&/option&&&option value="2"&站点2&/option&&&/select&&&/td&&&/tr&&&/table&&&/div&&&div id="div_tb" align="center"&&&table id="listTable"&&&tr&&&td id="td4" width="15%"&序号&/td&&&td id="td4" width="25%"&检测项描述&/td&&&td id="td4" width="20%"&传感器类型&/td&&&td id="td4" width="20%"&监测项ID&/td&&&td id="td4" width="20%"&操作&/td&&&/tr&&&/table&&&/div&&&br&&&table id="listTable1"&&&tr&&&td align="left" &&&select class="selectWidth"&&&option&item&/option&&&/select&&&input type="button" value="添加监测项" style="font-Size:15"&&&/td&&&/tr&&&/table&&&/form&&&/center&&&/body&&&/html&&
servlet代码：&package com.sunwe.ems.&
import java.io.IOE&import java.io.PrintW&import java.util.ArrayL&import java.util.L&
import javax.servlet.ServletE&import javax.servlet.http.HttpS&import javax.servlet.http.HttpServletR&import javax.servlet.http.HttpServletR&import net.sf.json.JSONA&public class getList extends HttpServlet {&public getList() {&super();&}&
public void doGet(HttpServletRequest request, HttpServletResponse response)&throws ServletException, IOException {&this.doPost(request, response);&}&
public void doPost(HttpServletRequest request, HttpServletResponse response)&throws ServletException, IOException {&response.setHeader("Cache-Control", "no-cache");&response.setContentType("text/charset=UTF-8");&response.setCharacterEncoding("utf-8");&String key =request.getParameter("key");&PrintWriter out = response.getWriter();&System.out.println("itemGroupKey "+key);&Item it =new Item();//该对象自己设置&it.setItemKey(8002);&it.setItemGroupKey(1);&it.setItemName("aaa");&it.setModel("dsdsdss");&List&Item& list =new ArrayList&Item&();&list.add(it);&list.add(it);&list.add(it);&list.add(it);&list.add(it);&list.add(it);&list.add(it);&JSONArray json = JSONArray.fromObject(list);&System.out.println(json);&out.print(json);&out.flush();&out.close();&}&}
生成的json格式[{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"},{"id":0,"itemGroupKey":1,"itemKey":8002,"itemName":"aaaa","model":"dsdsdss"}]&
xml配置&&?xml version="1.0" encoding="UTF-8"?&&&web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="/xml/ns/javaee" xmlns:web="/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="/xml/ns/javaee /xml/ns/javaee/web-app_3_0.xsd" version="3.0"&&
&servlet&& &
&description&AJAX&/description&& &
&display-name&AJAX&/display-name&& &
&servlet-name&getList&/servlet-name&& &
&servlet-class&com.sunwe.ems.servlet.getList&/servlet-class&&
&/servlet&&
&servlet-mapping&& &
&servlet-name&getList&/servlet-name&& &
&url-pattern&/getList&/url-pattern&&
&/servlet-mapping&&&/web-app&&
json需要的包&&
1.commons-lang.jar&& & & 2.commons-beanutils.jar&& & & 3.commons-collections.jar&& & & 4.commons-logging.jar && & & 5.ezmorph.jar&& & & 6.json-lib-2.2.2-jdk15.jar&
json包下载：
免费下载地址在
用户名与密码都是
具体下载目录在 /2014年资料/4月/28日/jQuery Ajax Servlet JSON（Struts2）动态生成table
下载方法见
jQuery 的详细介绍：jQuery 的下载地址：
本文永久更新链接地址：
相关资讯 & & &
& (04月27日)
& (03月30日)
& (昨 14:55)
& (04月27日)
& (03月30日)
图片资讯 & & &
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款