`

jQuery:为已有table动态添加、删除行与单元格

阅读更多

这是jsp中需要动态添加、删除行的table:

<div class="detail_list">
	<table class="detal_tab" width="100%" cellpadding="0" cellspacing="0" border="1">
		<tr>
			<th>扫描时间</th><th>扫描类型</th><th>公众号</th><th>公众号昵称</th>
		</tr>
	</table>
</div>

 js代码:

$.post(
			"/工程名/namespace/XXX.action",
			"传递的参数名="+传递参数的值,
			function(data){//异步返回结果
				var scanPage = eval("("+data+")");
				var tab = $(".detal_tab");//获取表
				//每次填充表之前,先清除以前的旧数据
				if(tab.size()>0){
					tab.find("tr:not(:first)").remove();
				}
				//填充数据
				var list = scanPage.list;//这是一个list集合
				for(var i=0;i<list.length;i++){
					var str = 
						'<tr>'+
							 '<td>'+list[i].createTimeStr+'</td>'+
							'<td>'+list[i].type+'</td>'+
							'<td>'+list[i].openId+'</td>'+
							'<td>'+list[i].nick+'</td>'+
						'</tr>';
					$(".detal_tab").append(str);
				}
			}
);

 这样就可以了啊,这是用jQuery实现的,在 网上搜了好多,终于找到了一个相对合适的。

 

0
0
分享到:
评论

相关推荐

    JQuery 动态生成DIV、Table并处理数据

    - **填充数据**:通过遍历数据集,可以动态生成表格行和单元格,将数据填入表格。例如: ```javascript var data = [['Name', 'Age'], ['John', 30], ['Jane', 25]]; var table = $('&lt;table&gt;'); $.each(data, ...

    table JS 添加行和删除行

    **添加行:** 在JavaScript中,我们可以获取到表格引用,然后创建新的`&lt;tr&gt;`元素并添加到表格中。以下是一个基本示例: ```javascript // 获取表格 var table = document.getElementById('myTable'); // 创建新行...

    JQuery 自定义 Table

    - 动态添加和删除行:使用`append()`添加行,使用`remove()`删除行。 - 表格排序:通过插件如`datatables.js`实现,或者自定义函数比较单元格内容进行排序。 - 数据筛选:使用`filter()`方法筛选符合特定条件的行...

    jquery动态添加删除

    本文将根据提供的示例代码,深入分析如何使用jQuery进行动态添加与删除表格行的操作,并进一步探讨其背后的原理。 #### 二、核心代码解析 首先,我们来看一下这段代码的核心部分: ```javascript $(function(){ ...

    jquery table 合并相同列

    1. **获取表格数据**:使用 jQuery 的 `$('table tr')` 选择器获取表格中的所有行,然后遍历每一行的单元格 `$('td')`。 2. **比较相邻列**:对于每个单元格,我们需要比较其与前一个单元格的内容。如果内容相同,...

    jQuery动态生成隔行变色的table

    这里的`&lt;table&gt;`元素有一个ID `dynamicTable`,我们将用jQuery选择这个元素并动态添加数据。 2. **CSS样式**: CSS用于设置隔行变色的样式。可以创建如下样式: ```css #dynamicTable tbody tr:nth-child(even)...

    jquery-table2excel

    《jQuery Table to Excel:高效导出表格数据》 在现代Web开发中,处理表格数据并进行导出是一项常见的任务。jQuery作为一个广泛使用的JavaScript库,提供了许多便利的功能,其中包括将HTML表格转换为Excel文件的...

    JQuery table改变列的宽度

    一个表格由`&lt;table&gt;`元素开始,包含若干行`&lt;tr&gt;`(table row),每一行又包含若干个单元格`&lt;td&gt;`(table data cell)或表头单元格`&lt;th&gt;`(table header cell)。在jQuery中,我们可以利用选择器精确地定位到我们需要...

    jquery选中批量删除单元格内容代码

    对于批量删除单元格内容的需求,jQuery 提供了便利的方法来实现这一功能。本文将详细介绍如何使用 jQuery 实现选中批量删除表格中的单元格内容。 首先,我们需要在 HTML 页面中引入 jQuery 库。在这个例子中,我们...

    Jquery datagrid实现单元格编辑

    不过,需要注意的是,jqGrid虽然强大,但其社区支持和更新已不如以前活跃,现在有更多现代的前端框架如React、Vue和Angular提供了类似的功能。如果你正在考虑新的项目,可能需要考虑这些更现代的选择。

    JQuery实现表格动态增加行并对新行添加事件

    - 在新行被添加后,我们需要确保已有的事件监听器能够正确地绑定到这些新元素上。可以使用jQuery的`on()`方法来实现事件委托,这样新添加的行也会继承事件处理函数。 - 示例代码中使用了`onclick`属性直接绑定事件...

    jquery表格增行,删行处理

    在实际应用中,可能需要在用户交互时动态添加或删除行。例如,用户点击“添加”按钮时插入新行,或者在确认删除操作后移除行。这需要结合事件处理和条件逻辑来实现。 此外,为了保持表格数据的一致性,可以考虑在...

    jQuery表格增加删除代码.zip

    通过jQuery,我们可以轻松地添加新的`&lt;tr&gt;`元素到表格中,或者移除已有的行。 标签"JS特效-表格图层"暗示了这可能不只是简单的数据操作,还可能涉及到一些视觉效果,比如高亮、动画过渡等,以提高用户体验。图层...

    jQuery动态创建表格生成器代码.zip

    2. **动态添加行**:利用`append()`方法向`&lt;tbody&gt;`中添加新的`&lt;tr&gt;`(行)元素。每个新行可以包含多个`&lt;td&gt;`(单元格)元素,用于显示数据。 3. **动态添加列**:在已有的行中插入新的`&lt;td&gt;`元素,这需要考虑到...

    jquery table的静态排序

    ### jQuery Table静态排序知识点 #### 一、简介 在网页开发过程中,经常需要对表格数据进行排序处理,以便用户能够更方便地查看和管理数据。jQuery Tablesorter插件为实现这一功能提供了一种简单而有效的方法。...

    jQuery点击展开表格单元格代码.zip

    `addClass()`和`removeClass()`用来添加或移除CSS类,`next()`选择当前单元格的下一个相邻元素,`slideUp()`和`slideDown()`则是jQuery的动画方法,用于控制元素的显示和隐藏,带有平滑过渡的效果。 在样式方面,...

    动态改变表格的行和列

    7. **库和框架支持:** 有许多优秀的JavaScript库如jQuery, DataTables, Handsontable等,提供了更丰富的功能,包括动态添加和删除行和列。它们简化了DOM操作,提供了更友好的API,同时具备数据排序、过滤、分页等...

    table行增加.zip

    "table行增加.zip"这个资源显然关注的是如何在HTML表格中动态地添加行,这是一个经常遇到的问题,特别是在需要用户输入或者数据显示变化的场景下。下面我们将深入探讨这个主题。 首先,我们来理解"table行增加"的...

    页面动态添加行-批量保存

    - 为了使新行与已有的行保持一致,需要为新增的行设置相应的事件监听器,如`input`事件来实时响应用户输入。 2. **批量保存**: - 用户完成所有修改后,需要收集所有行的数据。可以遍历表格的所有行,获取每个...

    jquery实现表格多选,单击颜色加深,再点击颜色还原,隔行换色,源代码

    要实现“多选”功能,我们需要为表格的行或单元格添加复选框,并使用jQuery监听复选框的`click`事件。当用户选择一行时,可以将该行的复选框设置为选中状态,同时记录选中的行。可以创建一个数组来存储选中的行的...

Global site tag (gtag.js) - Google Analytics