如何实现将JS动态添加的TR中的值传到后台中并批量插入

在我的上一篇文章当中,已经在静态页面中实现了JS动态添加删除TR。在实际工作中,更多的是需要将JS所添加的tr中的值保存至数据库中。下面我将介绍在SSH框架中如何实现这一功能需求。(以下均由我所做的实际项目给出功能代码)

在JSP中,JS代码会稍有变化。

 function addItem()
	    {
	    	var tr = document.getElementById("table_name").insertRow(3);
	    	
	    	for(var i = 0;i<7;i++){
	    		var td = "td"+i;
	    		td = tr.insertCell();
	  			td.width="13%";
	  			td.className = "edit_content_text";
	  			if(i==0){
	  				td.innerHTML = "<input type='text' name='item' />";
	  			}else if(i == 1){
	  				td.innerHTML = "<input type='text' name='desc_comm' />";
	  			}else if(i == 2){
	  				td.innerHTML = "<input type='text' name='pack' />";
	  			}else if(i == 3){
	  				td.innerHTML = "<input type='text' name='ctns' />";
	  			}else if(i == 4){
	  				td.innerHTML = "<input type='text' name='qty' />";
	  			}else if(i == 5){
	  				td.innerHTML = "<input type='text' name='us_lb' />";
	  			}else if(i == 6){
	  				td.innerHTML = "<input type='text' name='amount' />";
	  			}
	    	}
	    	
	    }

我用的是struts1,输入框的代码是这样写的:

<html:text  property="item" styleClass="input_text" maxlength="20"/>
但是在添加tr中的代码只能用普通标签,而不能用struts标签,否则会报错。具体原因我没有深究,希望有知道的告知则个。

JS中的item、desc_comm等属性的值并不需要再刻意赋值至form表单中,因为,这个addItem()本身就是在form表单中调用的,因此新添加的tr也就在form表单中。

在后台接收的代码如下:

String[] item = request.getParameterValues("item");
		String[] desc_comm = request.getParameterValues("desc_comm");
		String[] pack = request.getParameterValues("pack");
		String[] ctns = request.getParameterValues("ctns");
		String[] qty = request.getParameterValues("qty");
		String[] us_lb = request.getParameterValues("us_lb");
		String[] amount = request.getParameterValues("amount");
因为同一个property会对应多个值,因此,接收的时候得用String数组。这样,使用一个for循环就可以将前台的数据set至对应的属性中就OK了。

int length = item.length;
		
		for(int j = 0;j<length;j++){
			//每循环一次就要重新new一个对象。不然,只会添加一条数据
			Item it = new Item();			
			it.setItem(item[j]);
			it.setDesc_comm(desc_comm[j]);
			it.setPack(pack[j]);
			it.setCtns(Integer.parseInt(ctns[j]));
			it.setQty(Integer.parseInt(qty[j]));
			it.setUs_lb(Integer.parseInt(us_lb[j]));
			it.setAmount(Integer.parseInt(amount[j]));
			it.setContract_id(contract_id);
			//调用Item的添加方法
			itemService.addItem(it);
			
		}


之前觉得这挺难的,后来发现其实也就这么一回事。另外,我做的这个功能还涉及到多表插入以及多表查询结果集显示的问题。待我完善了再总结出来。








  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要读取上传的文件内容并将数据动态添加到表格,你可以按照以下步骤进行操作: 1. 在 HTML 添加一个文件上传表单控件,例如: ``` <input type="file" id="fileUpload"> ``` 2. 使用 JavaScript 获取上传的文件内容,例如: ``` const fileInput = document.getElementById('fileUpload'); const file = fileInput.files[0]; const reader = new FileReader(); reader.onload = function(e) { const fileContent = e.target.result; // 在这里处理文件内容 }; reader.readAsText(file, 'UTF-8'); ``` 3. 处理文件内容并将数据动态添加到表格。可以使用 JavaScript 操作 DOM 元素来创建表格和表格行,并使用字符串拼接或模板字符串来动态生成表格内容,例如: ``` const fileInput = document.getElementById('fileUpload'); const file = fileInput.files[0]; const reader = new FileReader(); reader.onload = function(e) { const fileContent = e.target.result; const lines = fileContent.split('\n'); const table = document.createElement('table'); for (let i = 0; i < lines.length; i++) { const row = document.createElement('tr'); const cells = lines[i].split(','); for (let j = 0; j < cells.length; j++) { const cell = document.createElement('td'); cell.textContent = cells[j]; row.appendChild(cell); } table.appendChild(row); } document.body.appendChild(table); }; reader.readAsText(file, 'UTF-8'); ``` 这将创建一个包含上传文件所有行的表格,并将其添加到文档。请注意,这仅是一个示例代码,你需要根据你的需求进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值