渲染表单和删除表单中的行，通俗易懂，可在项目中套用

需要源码小伙伴可以到微信小程序：”MINIIT资源库“获取，作者承诺免费

相信很多初学web的小伙伴都遇到操作表单增删改查的功能

今天我给这些小伙伴写一个示例，简单易懂，拷贝到项目上简单修改可以直接用或者学习

这个示例很人性化，查询和删除都写帮小伙伴写好了，简单套用即可

这是需求样式：

这是前端的表单代码：

<table class="table" id="table" style="margin-top: 15px;">
    <thead>
		<tr style="display: block;">
			<th style="width: 105px;">序号</th>
			<th style="padding-left: 10px;width: 90px;">设备名称</th>
			<th style="padding-left: 90px;width: 170px;">IP</th>
			<th style="padding-left: 100px;width: 190px;">设备编号</th>
			<th style="padding-left: 120px;width: 200px;">更新OSD</th>
			<th style="padding-left: 30px;width: 100px;">子流码</th>
			<th style="padding-left: 30px;width: 100px;">视频丢失</th>
			<th style="padding-left: 30px;width: 100px;">移动侦测</th>
			<th style="padding-left: 30px;width: 100px;">音频</th>
			<th style="padding-left: 50px;width: 120px;">操作</th>
		</tr>
	</thead>
	<tbody id="tbMain" class="tbMain" style="height: 215px;display: block; overflow:auto;"></tbody>
</table>

这是jquery代码：

var getting={
	   method:"get",
	   url:"http://localhost:8088/aicm/JSWS/GetNvrList",
	   data:{},
	   async:false,//是否异步请求
	   dataType: "json",
	   success: function(data){
		   var vewData=JSON.parse(data);//将响应的数据转换为JSON对象，过程为JSON字符串————>JSON对象
		   let tdby=document.querySelector('tbody');//获取tbody元素对象，用于后面填充表单准备
		   // 根据数组长度循环创建tr
		   for (let i = 0; i < vewData.Data.Data.length; i++) {//vewData.Data.Data这个获取数据的方式要根据自己拿到的数据结构更改，如我拿到的数据结构是：data:"RecordCount":10,"PageSize":10,"PageCount":1,"CurrentPageIndex":1,"Data":{"Data":[{"P2PSN":"1","User":"mike","Pass":"123456"},"P2PSN":"17","User":"admin","Pass":"123456"}]}。那我们接受数据的变量vewData就是里面的data,Data就是里面的Data，这个需要搞明白（JSON是很重要的知识点）
		       let tr=document.createElement('tr');//创建表单元素
			   let td01=  document.createElement('td');//这个也是表单元素		   					  
			   td01.innerHTML=i+1;// 给每一行加个序号//给表单元素添加文本
			   tr.appendChild(td01); //这里就表示一行里面已经添加了一列，就是序号
		   //根据数组对象中的数据循环创建td并赋值
		       for (const key in vewData.Data.Data[i]) {//Data[i]:如果i=1，那就对应我上面数据里的"[{},{}]"，中括号里面的第一个小括号
				  
				    let td=  document.createElement('td');
					td.innerHTML=vewData.Data.Data[i][key];
					tr.appendChild(td); 
					 
		       }
		   					   
		   //最后创建删除按钮并追加
		   let detr=document.createElement('td');

		  
		   let btn1=document.createElement('button');	
		   btn1.innerHTML='删除';
		   btn1.style.borderRadius='3px';
		   btn1.style.backgroundColor='red';
		   btn1.style.border='none';
		   btn1.value=vewData.Data.Data[i]['FacID'];//关键：可以使删除按钮的value属性携带要删除的设备id
		   detr.appendChild(btn1);
		   tr.appendChild(detr);
		   tdby.appendChild(tr);
		   }
		   //获取tbody中的所有按钮DOM对象
		   let btns=tdby.querySelectorAll('button');
		   
		   for (let i = 0; i < btns.length; i++) {
		       btns[i].onclick=function(){
				   var result=confirm("确定删除该数据吗？");
				   if (result==true){
					    $.getJSON("http://localhost:8088/aicm/JSWS/DELP2P/"+this.value,function (res) {//这里的this.value是上面说的关键，在删除按钮上绑定要删除的设备id，然后通过获取删除按钮对象，简介获取删除按钮上绑定的设备id
							if (res=="true"){//这个true是后端返回的删除结果响应，要理解
						        alert('删除成功！');
						    }else {
								alert('删除失败！');
						    }
						})
					}
				}
			}
	    }
	};
	
	
			
	
	
	
	$.ajax(getting);