`
niuka
  • 浏览: 51573 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery创建动态表格

 
阅读更多

      最近做了一个项目,使用了jquery来操作表格,其实也没什么太多的技术点,只是自己记录一下,方便自己以后碰到类似的问题有一个参照。废话不说了,大家看看效果先.juqery 动态创建表格

JS 代码如下:

var myTBody=null;
	$(function() {
		
		//ajax请求拿到产品的数组
		
		
		myTBody=$("#content_TBody");
		
	});


		


var tableObjectID = 0;
function addTR(templateId,containerId) {
	var tr = $("#"+templateId).clone();
	tr.attr("id", tableObjectID);
	setID(tr);
	tr.show();
	$("#"+containerId).append(tr);
	addJsonSuggest(containerId);
}
function deleteTR(a) {
	$($(a)[0].parentNode.parentNode).remove();
	revertID();
}
function revertID(containerId) {
	tableObjectID = 0;
	$("#"+containerId+" tr").each(function(index) {
		setID($(this));
	});
}
function setID(tr) {
	tr.find("input, select, textarea")
	.not(":submit, :reset, :image, [disabled]").each(function(i){
		this.id = this.id.replace(/\d/, tableObjectID);
		this.name = this.name.replace(/\d/, tableObjectID);
	});
	tableObjectID++;
}

function addJsonSuggest(containerId){
	      var installstaffs = $("#"+containerId+" input[id^=sku_]");

	      installstaffs.each(function(i){
	    	  if(this.id){
	  				var id = this.id;
	  				$(this).unbind();
	  				$('#'+id).jsonSuggest({url: 'datas.txt', maxResults: 10});
	    	  }
	      });
}

 

2
3
分享到:
评论
3 楼 lyohy20 2012-08-02  
感兴趣,可否给个数据库操作的完整例子lyohy@21cn.com 谢谢
2 楼 niuka 2012-03-19  
第一个问题:关于后台如何取得这些数据
    1你会看到的每一个文本框的name都有一定的规律比如item[0].name这种名字的话,后台可以在actionForm中定义一个自动增长的ArrayList来接收,public class AutoArrayList extends ArrayList{  
    private Class itemClass;  
    public AutoArrayList(Class<?> itemClass) {  
        this.itemClass = itemClass;  
    }  
    public Object get(int index) {  
        try {  
            while (index >= size()) {  
                add(itemClass.newInstance());  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
        return super.get(index);  
    }  
}  这个Arraylist必须要重写get方法。不然或报错。
第二个问题就是如果各列具备关联,比如说二级联动。
  第一行select是 省p_0 市c_0
  第二行select是 省p_1 市c_1
这样就能通过id很快定位到相关联的元素了。
1 楼 heiheben 2012-03-15  
在前台这样操作都没问题
但是怎么样在后台渠道这些数据
还有就是 如果一行内的不同列具备关联关系 这个该如何处理

相关推荐

    jquery实现动态生成表格

    数据展示时候,经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小,通过jquery的html()和append()方法动态生成html表格的实例。

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

    《jQuery动态创建表格生成器代码详解》 在Web开发中,动态生成表格是常见的需求,尤其是在数据展示和交互性较强的应用场景中。jQuery作为一个轻量级的JavaScript库,以其简洁的API和强大的功能深受开发者喜爱。本文...

    jquery 动态创建表格单元随机色

    在这个场景中,我们关注的是如何使用 jQuery 动态创建表格,并且为表格的每个单元格赋予随机背景颜色。这通常用于增强用户界面的视觉吸引力,或者在数据展示时提供更直观的区分。 首先,我们需要理解 jQuery 如何...

    jquery动态创建、删除表格中的行

    jquery动态创建表格中的行、删除指定行

    jquery动态控制表格的行

    通过jQuery,可以动态创建这些元素并将其插入到表格中。以下是一个简单的示例: ```html 姓名 年龄 添加行 $(document).ready(function() { $("#addRow").click(function() { var newRow = $...

    使用jquery实现表格动态分页

    本教程将详细讲解如何使用jQuery库来实现表格的动态分页,同时结合Java后端进行数据的动态查询和分页处理。 首先,让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时,仅加载当前显示的数据,...

    jQuery实现动态更改table表格数据

    本教程将深入探讨如何使用jQuery实现动态更改table表格数据,让你的网页表格具有实时编辑功能,提升用户体验。 首先,我们需要理解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素开始,包含若干个`&lt;tr&gt;`(行)...

    jQuery创建动态事件.zip

    jQuery创建动态事件是这个领域中的一个重要概念,它允许我们根据需要动态地添加和管理事件监听器,为网页元素提供响应用户行为的能力。 jQuery的核心优势之一就是其简洁的API,这在处理事件方面尤为明显。传统的...

    jQuery动态表格检索排序代码.zip

    通过学习和实践“jQuery动态表格检索排序代码”,开发者可以掌握如何创建高性能、交互性强的表格组件,这对于任何前端开发者来说都是一项重要的技能。 总结来说,这个压缩包提供了一个完整的解决方案,包括动态加载...

    jquery 动态创建可编辑表格

    可以输入单价计算出金额,输入金额反算单价,统计合计功能支持键盘左右上下移动功能。

    jQuery+ajax实现动态添加表格tr td功能示例

    ### jQuery+ajax实现动态添加表格tr td功能 在进行Web开发时,我们经常需要动态地从服务器获取数据,并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...

    jQuery实现动态给table赋值的方法示例

    本篇文章将深入探讨如何使用jQuery来动态地给HTML表格(table)赋值,通过一个具体的实例来展示相关技巧。 首先,我们需要一个基本的HTML结构,包含一个具有特定类和ID的table元素。在这个例子中,我们有一个layui...

    JQuery实现动态表格点击按钮表格增加一行

    在使用JQuery来实现动态表格增加行的场景中,主要涉及到的技术点包括: 1. DOM操作:文档对象模型(DOM)允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中,DOM操作用于动态地向表格中插入新的...

    jQuery分页动态数据表格插件.zip

    在创建分页动态数据表格时,jQuery提供了丰富的API和函数,使得开发者可以快速构建具有交互性的表格。 分页功能是通过计算总数据量和每页显示的数据行数来实现的。通常,插件会有一个配置选项,允许开发者设置默认...

    jQuery JSON动态获取表格数据代码.zip

    总的来说,这个压缩包提供了使用jQuery和JSON动态生成表格的示例,包括从服务器获取数据、动态创建和更新表格、以及实现表格行的折叠和展开功能。这些技术对于开发响应式、交互性强的网页界面非常有用。

    jquery表格动态添加删除行代码.zip

    本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能,为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能,即在表格中动态地添加和删除行,这对于数据展示和编辑是非常实用的。 首先...

    jquery 操作动态表格(原)

    在文章“jquery 操作动态表格”中,作者可能详细讲解了上述知识点,并通过实例代码演示了如何创建、更新和管理动态表格。通过阅读这个博客(链接:https://jsufly.iteye.com/blog/758925),开发者可以学习到实用的...

Global site tag (gtag.js) - Google Analytics