js对象定义，表格数据转成json上传提交

最新推荐文章于 2022-05-23 11:55:46 发布

wive

最新推荐文章于 2022-05-23 11:55:46 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.youkuaiyun.com/javadhh/article/details/50865403

版权

前端技术专栏收录该内容

41 篇文章

订阅专栏

这篇博客探讨了如何在JavaScript中处理表格数据，包括添加和删除行的操作。主要内容集中在将整个表格数据转化为JSON格式，并通过点击事件实现一键上传到服务器，以支持立即上线的功能。文中附带了操作前后的效果图示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加页面js:

<script type="text/javascript">
/**新建一个缘分图片对象**/
function createFateImg(imgUrl,linkType,link,orderNum ,valid){  
 		var obj = new Object;  
 		obj.imgUrl =imgUrl;  
		obj.linkType = linkType;  
 		obj.link = link;  
 		obj.orderNum = orderNum;
 		obj.valid = valid; 
 		obj.toDataHtml = function(){  
   		var dataHtml = '<tr>'+
			'<td align="center"> <img src="'+ this.imgUrl +'" width="300px" height="100px"/></td>'+
			'<td align="center"> <input type="text" style="text-align: center; width:99%;" value="'+  this.linkType + '"/></td>'+
			'<td align="center"> <input type="text" style="text-align: center; width:99%;" value="'+  this.link + '"/></td>'+
			'<td align="center"> <input type="text" style="text-align: center; width:99%;" value="'+  this.orderNum + '"/></td>'+
			'<td align="center"> <input type="text" style="text-align: center; width:99%;" value="'+  this.valid + '"/></td>'+
			'<td align="center"> <a href="#" οnclick="removeSelf(this)">删除</a></td>'+
			'</tr> ';
   		return dataHtml; 
		};
		return obj;  
}  


/**上传图片，并将图片和输入的文字作为一条记录显示到父窗口，对应于添加按钮的点击事件**/
function updateFateImgToServer(){
	$("#addTip",$.pdialog.getCurrent()).text("");
	
	var fileElements = [];
	var linkType = $("#linkType",$.pdialog.getCurrent()).find("option:selected").text();
	var link = $("#link",$.pdialog.getCurrent()).val();
	var orderNum = $("#orderNum",$.pdialog.getCurrent()).val();
		
	
	fileElements.push("fateImg");
	//提交表单
	$.ajaxFileUpload({
		url : 'updateFateImgToServer.do',  //uploadHeadPhoto
		secureuri : false,
		fileElementId :fileElements,
		dataType : 'json',
		success : function(data, status) {
			$("#addTip",$.pdialog.getCurrent()).text("添加广告位记录成功");
			var img1 = new createFateImg(data.returnValue,linkType,link,orderNum ,'1');  //data.returnValue是返回上传后图片路径
			var dataHtml = img1.toDataHtml();
			$("#fateImgList",navTab.getCurrentPanel()).append(dataHtml);
			//关闭对话框
			$.pdialog.closeCurrent(); //这行js就是执行完以上的js之后关闭该dialog弹出框 
		},
		error : function(data, status, e) {
			$("#addTip",$.pdialog.getCurrent()).text("添加广告位记录失败");
		}
	});
}
</script>

删除一行的js:（对应于删除链接的点击事件）

/**把这一行记录删除**/
function removeSelf(obj){
	$(obj).parent().parent().remove();
}

提交整个表格数据，转成json上传服务器，对应立即上线按钮：

/**更新表格上所有数据到服务器**/
function submitDataToServer(){
	var fateImgs = [];
	$("#fateImgList tr").each(function(i ,trObj){
		var tds = $(trObj).children();
		var imgUrl = tds.eq(0).find("img").attr("src");
		var type = tds.eq(1).find("input").val();
		var href = tds.eq(2).find("input").val();
		var sort = tds.eq(3).find("input").val();
		var valid = tds.eq(4).find("input").val();
		var fateImg = new createFateImg(imgUrl,type,href,sort ,valid);  
		fateImgs.push(fateImg);
		//alert(imgUrl + " : " + type + " : " + href + " : " + sort + " : "+valid);
	});
	var dataLists = JSON.stringify(fateImgs);
	
	//提交json字符串
	$.ajax({
		type: "POST",
		url : 'submitFateImgList.do',
		data : {		
			"dataLists" : dataLists
		},
		secureuri : false,
		dataType : 'json',
		success : function(data, status) {
			var valueObj = data.message;
			$("#success",navTab.getCurrentPanel()).html(valueObj);
		},
		error : function(data, status, e) {
			alertMsg.info(e);
		}
	});
}

效果图1：

效果图2、