利用Jquery+JS生成Json串，动态创建添加项

需求：在一张页面中创建若干个子问题。创建数量不确定，子问题没有主键ID可查。页面内容和子问题内容存在主外键关系。点击“保存”时，将主表内容和子问题内容一同保存进数据库。页面如下图：

主表和子表数据库主外键结构如图：

添加位置的HTML代码为：

解决方案：

1、在页面“新建选项内容”中添加 onclick 方法οnclick="newFankui(this);"

新建选项内容

2、在JS中创建 newFankui() 方法：

function newFankui(obj){
 	$("#J_FankuiList").append(fankui());
}

3、创建 fankui() 方法，用来生成需要的子表格式：

function fankui(iz){
	var html = "";
	html += "
";
	html += "	
";
	html += "		
";
	html += "			
";
	html += "				";
	html += "			
";
	html += "			
选项名称：";
	html += "				";
	html += "			
";
	html += "			
排序序号：";
	html += "				";
	html += "			
";
	html += "			
是否默认选择：
";
	html += "				";
	html += "					选中";
	html += "					非选中";
	html += "									";	
	html += "				";
	html += "			
";
	html += "		
";
	html +="		
";
	html +="			

4、因为3中涉及到“删除”功能，所以创建对应的方法 delFankui(obj)

function delFankui(obj){
	$(obj).parent().parent().parent().remove();
 	$("#J_AddCustomSKU").attr("class","");
 	$("#J_AddCustomSKU").attr("onclick","addSkuList(this)");
	$("#newFankuiPropertyButton").attr("class","");
	$("#newFankuiPropertyButton").attr("onclick","newFankui(this);");

}

5、以上表格已经建好。下面需要填写表格内容，并获取。这里使用JS中的 JSON.stringify() 方法生成Json串儿。

function feedbackProperty(){
	var feedbackMap = new Map();
	var valueList = null;
	
	var outerLength = $(".sku-div-in-controls > .hidentop5px > ul").get();	//外部“选项内容的集合”
	
	
	for(var i=0; i .marginright5 > input[type='hidden']").get();
		
		//收集所有input=text对象
		var valueTextList = $(outerLength[i]).parent().find(" ul > .marginright5 > input[type='text']").get();
		
		//收集所有input=selected对象
		var valueSelect = $(outerLength[i]).parent().find("ul > .marginright5 > select option:selected").get();
		
		//将input=hidden的值压入list
		var a = $.trim($(valueHiddenList).val());
		if(a!=null && a!="" && a!= undefined){
			valueList.push(a);
		}else{
			a = "0";
			valueList.push(a);
		}
		
		//内循环2次，将input=text的值压入list
		for(var j=0;j<3; j++){
			if($(valueTextList[j]).val()!=null && $(valueTextList[j]).val() !="" && $(valueTextList[j]).val() != undefined){
				valueList.push($.trim($(valueTextList[j]).val())); 
			}
		}
		//将selected的值压入list
		valueList.push($.trim($(valueSelect).val()));
		var option = "option"+i;
		feedbackMap.put(option, valueList);
		valueList = null;
	}
	var json = JSON.stringify(feedbackMap.getElements());
	if($("#feedback_value").val()!=null){	//#feedback_value不为空时，清空
		$("#feedback_value").val();
	}
	$("#feedback_value").val(json);
}

以上方法的思路是：

1）、创建一个Map用来装最后的JSON数据

2）、再创建一个List存储key：value中的value值。设计最后的JSON格式为[{key:[data1,data2,data3]}]

3）、通过JQuery获取所有三个数据对应的 标签个数（见 $(".sku-div-in-controls > .hidentop5px > ul").get() ）

4）、遍历所有 dom 元素，分别找到属性为 hidden、text和selected的元素

5）、分别将以上元素的值存入2中的List中，顺序为[hidden，text，text，selected]（这里是表单属性顺序）

6）、因为 JSON.stringify() 生成的json格式为[{"key":"a","value":["a1","a2","a3","a4"]},{"key":"b","value":["b1","b2","b3","b4"]}]，所以要为每个对象生成一个key对应的name值，所以在4的循环中手动生成一个name名。

var option = "option"+i;

feedbackMap.put(option, valueList);

7）、将生成好的map作为参数存放进 var json = JSON.stringify(map) 中。将json值存入 id为feedback_value 的hidden 中。

6、生成json的方法完成。下面如何在不使用 Ajax 的情况下调用该方法。（不用Ajax是因为我目前不会Ajax）：

在“保存”按钮中添加一个 οnmοuseοver="feedbackProperty()" 方法，表示当鼠标划过“保存按钮”时，就调用生成json的方法。这样就可以把json传递给后台获取。

以上就是利用JQuery完成动态创建子表的过程。