利用jquery动态添加和删除表格的一行，并且保存单行数据

开发时遇到一个需求：要求要在页面的表格可以添加和删除一行，并能填写对应的数据后保存这一行数据。

HTML代码

界面使用了freemarker框架，teams是后台传过来的list类型数据

<form action="" id="" method="post">
...
<table  id="addTable" ><tr class="first_tr"><th>姓名</th><th>国籍</th><th>单位</th><th>职务</th><th>专业、特长</th><th>操作</th></tr><#list teams as item><tr><input type="hidden" id="id" value="${item.id!}"/><td>${item.name!}</td><td>${item.gj!}</td><td>${item.dw!}</td><td>${item.zw!}</td><td>${item.zytc!}</td><td><input type="button" onclick="delRow(this)" value="-删除"/></td></tr></#list>
</table>
<table><tr><td celspan="6"><input type="button" onclick="addRow()" value="+添加"/></td></tr>
</table>
...
</form>

为了不提交表格模板，我把模板放在了form表单外面，并且样式设置为不可见

需要添加的表格模板:

<table  style="display: none" id="tbl" ><tr class="will80"><td><input type="text" id="name" name="name" /></td><td><input type="text" id="gj"  name="gj" /></td><td><input type="text" id="dw" name="dw" /></td><td><input type="text" id="zw" name="zw" /></td><td><input type="text" id="zytc" name="zytc"/></td><td></td>//新增的表格中需要有保存和删除操作<td><input type="button" onclick="save(this)" value="保存"/><input type="button" onclick="delRow(this)" value="-删除"/></td></tr>
</table>

主要靠jquery代码，实现为#addTable添加最后一行
原理就是获取id为“tbl”的一行复制添加到id为“addTable”的最后一行。
保存这一行数据使用ajax。

jQuery代码

添加表格行

function addRow(){var targetTbody= $("#tbl tbody");//获取#tbl表格的最后一行var tr = targetTbody.children("tr:last");//复制到#addTable表格最后var tr2=$("#addTable tbody").children("tr:last");tr2.after(tr[0].outerHTML);
}

删除表格行

function delRow(obj){//获取当前对象的父元素，在其下寻找id为“id”的元素的值var id1=$(obj).parents("tr").find("#id").val();var res=confirm("确定要删除么？");if(res){//删除界面元素，当前行$(obj).parents("tr").remove();}//若有id就表示该数据是界面原本就有的，需要删除数据库数据//若无id表示为界面动态添加的，删除时只需要删除界面元素if(id1!=null){//ajax删除数据$.ajax({url : "suggestpage_delTeam.do",data : {"id":id1},type : "POST",success : function(data) {if (data == "true") {alert("删除成功");} else {alert(data);}}});}
}

保存单行数据

function save(obj) {var param = {};//获取当前属性param.projectId="${proId}";param.name = $(obj).parents("tr").find("#name").val();param.gj = $(obj).parents("tr").find("#gj").val();param.dw =$(obj).parents("tr").find("#dw").val();param.zw = $(obj).parents("tr").find("#zw").val();param.zytc = $(obj).parents("tr").find("#zytc").val();//判空校验if(checkNull(obj)){//保存数据$.ajax({url : "suggestpage_savePeople.do",ontentType : "application/x-www-form-urlencoded; charset=UTF-8",data : param,type : "POST",success : function(data) {if (data == "true") {alert("保存成功");//跳转界面window.location="part2.do?proId="+param.projectId;} else {alert(data);}}});}
}
//判空校验
function checkNewNull(obj){var ok=true;//获取新增的inputvar newtr=$(obj).parents("tr").find("input");newtr.each(function(){if($(this).val()==""){alert("请将表单填写完整！");$(this).focus();ok=false;return false;}});return ok;
}

利用jquery动态添加和删除表格的一行，并且保存单行数据相关推荐

JavaScript学习笔记：动态添加与删除表格行
文章目录一.添加表格行与单元格二.动态删除表格行与单元格三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...
原生态JS和JQuery版的动态添加、删除表格行
过了太久,JQuery都生疏了,闲来没事,写着玩玩. 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). >原生态 ...
jQuery动态添加、删除按钮及input输入框
效果图 div <tr><td class="column-title"><label>*******</label></td ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
jQuery为table表格动态添加或删除tr
HTML页面元素如下:  <div id="contractDetailDiv" title="销售订单明细&qu ...
php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下选项 $(function(){ // 添加选项 $("#opbtn").cli ...
JavaScript学习（六）——表格的动态添加与删除
JavaScript学习(六)--表格的动态添加与删除基本页面首先是去创建一个基本页面,上面有一个表格来展示信息 <div><input id="id" ty ...
layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
JSP中动态添加或删除table的行
个想要实现如上图动态添加或者删除一行的功能,代码如下:(包含点击"环节参与人员"空白栏时弹出组织结构人员树时的弹窗功能) HTML部分: <body ><di ...