前端模拟实现可编辑的表格table插件

        在做项目中遇到了一个供货记录的功能，要求用户自己编辑添加删除表格数据，接下来我们就模拟下前端如何实现该功能

        

	
		
		
		
		
		
		
		
		
		
		
		
	
	
		

			
新增
			

				

					

						

							

							
姓名
							

							

							

							

							

							
删除
						
					
				
				

					

						

							
ID
							
类型
							
姓名
							
所属公司
							
职称职务
							
身份证号
							
手机号
							
操作
						
					
					

					
				
			
		
		
		

			更多前端代码
		
	

对应的数据为是模拟的，对应的文件为

{
    "code": 0,
    "msg": "",
    "count": 5,
    "data": [
        {
			"NO":1,
			"type":"支付宝",
			"realname":"zcz001",
			"company_name":"公司001",
			"zhichen":"A++",
			"shenfenzheng":"1212121212122112",
			"phone":"138356455455"
        },
        {
        	"NO":2,
        	"type":"微信",
        	"realname":"zcz002",
        	"company_name":"公司002",
        	"zhichen":"B++",
        	"shenfenzheng":"1212121212122222222112",
        	"phone":"138356455456"
        },
        {
        	"NO":3,
        	"type":"线下",
        	"realname":"zcz003",
        	"company_name":"公司003",
        	"zhichen":"C++",
        	"shenfenzheng":"12121212",
        	"phone":"138356455457"
        },
        {
        	"NO":4,
        	"type":"线上",
        	"realname":"zcz004",
        	"company_name":"公司004",
        	"zhichen":"D++",
        	"shenfenzheng":"1212121212112121212",
        	"phone":"138356455458"
        },
        {
        	"NO":5,
        	"type":"大大大",
        	"realname":"zcz005",
        	"company_name":"公司005",
        	"zhichen":"F++",
        	"shenfenzheng":"1212",
        	"phone":"138356455459"
        }
    ]
}

以上就是对应的代码，部分js.css没有，想看整个效果可以去下载对应的资源里面下载，感觉不错的点个赞哦。