动态获取新增的数据+项目实例介绍

效果演示：

ok，我们一般做项目的时候会经常遇到这样的情况，就是数据是不停的新增的，但是数据我们也是需要实时获取的，这个时候我们需要的是将数据实时的拿到，或者是用户停止操作的时候我们将数据点击发布或者是一个操作的按钮将数据传递给后端。

这是一个真实的例子，但是没有做美化，包括提示信息也是没有做任何的美化的，包括里面的ajax也去掉了。不过这些都不重要，重要的是我们可以看效果，拿数据。

我们看h5代码：

<div class="templatemo-content-container">
			<button class="btn btn-default" style="background: #39ADB4;width: 10rem;margin-left: 1rem;font: '微软雅黑';color: white;" id="addUser" οnclick="addRow();">添加</button>
			<button class="btn btn-default" style="background: #39ADB4;width: 10rem;margin-left: 1rem;font: '微软雅黑';color: white;" id="release" οnclick="releaseClick();">发布</button>
		</div>

ps：不要纠结我为什么用来一样的css却不直接抽出来，只是写一个例子而已，这些细节就不要在意了。

js代码：

var i = 0;
	var rowFlg = [] //记录目前有几行
	//添加行
	function addRow() {
		if(rowFlg.length<5){
			i++;
			//加一行，往数组里增加一个，用来判断大小 
			rowFlg.push(i)
			var rowTem = '<tr class="tr_' + i + '">'
				//+'<td>' + i + '</td>'
				+ '<td><input class="form-control" style="width: 20rem;height: 100%;" type="Text" id="txt' + i + '" /></td>'
				+ '<td> <a href="#" class="templatemo-edit-btn" οnclick=delRow('+i+') >删除</a></td>'
				+ '</tr>';
			$("#table tbody:last").append(rowTem);
		}else{
			/*最多的一次是五个*/
			alert("一次最多操作5条");
		}
	}
	//删除行
	function delRow(_id) {
		$("#table .tr_"+_id).hide();//删除此行
		document.getElementById("txt" + _id).value='';//清楚此行的内容
		//删掉一个，我是删除的第一位，只用来判断他的长度是否大于5，不可再增加的时候才用到，所以删掉任意一个就可以
		rowFlg.splice(0,1);
	}
	//提交代码的时候是调用的函数
	function releaseClick() {
		var units =[];
		for( var j=1;j<=i;j++){
			if($("#" + "txt" + j).val()+'' !=='' ){
				units.push($("#" + "txt" + j).val());
			}
		}
		console.log("拿到的数据是："+units);
		 /*$.ajax({
				type:"post",
				url:"/sys/units",
				data : JSON.stringify(units),
                dataType:"json",
				contentType:"application/json",
                async:false,
				success:function(data){ 
					if(data.code == 200){
						layer.msg('发布成功！', {
		  					}, function(){
		  					//跳转的URL重定向到新的页面，这里是直接跳转到原页面
		  					window.location.href='cooperative_unit.html';
		  					}); 
					}
					else{
						layer.msg(data.message);
					}
				}
			});  */
	}

上面可以看出来，这里是动态画出来的表格，当然您可以使用组件画，这些不重要，我是直接拼字符串画的，这里具体的代码不需要解释了吧，这里如果哪一行或者哪里没看明白的，可以下方留言，我会解释的。