利用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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

为了不提交表格模板,我把模板放在了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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

主要靠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);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
删除表格行
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);
                }
            }
        });
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
保存单行数据
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;
    //获取新增的input
    var newtr=$(obj).parents("tr").find("input");
    newtr.each(function(){
        if($(this).val()==""){
            alert("请将表单填写完整!");
            $(this).focus();
            ok=false;
            return false;
        }
    });
    return ok;
}

原文地址:https://www.cnblogs.com/zhuyeshen/p/11433769.html

时间: 2024-10-26 05:34:26

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

jQuery动态添加和删除表格行

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <script type="text/javascript" src="

jQuery如何动态添加具有删除按钮的行

jQuery如何动态添加具有删除按钮的行:在实际用中,如果要操作表格的话,那最多的莫过于添加和删除行的操作,一般情况下,动态添加的行也可以动态删除,下面就简单介绍一下如何实现此操作,虽然比较简单,但是还是希望能够或多或少能够给需要的朋友带来一定的帮助.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author"

jquery动态添加删除一行数据

<html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

Jquery 动态添加删除元素 用js添加的元素无法删除问题

用jquery方法的绑定侦听和销毁来解决动态div的增加删除: 正确代码: <script type="text/javascript" > $(document).ready(function(){  bindListener(); }) function addimg(){  $("#mdiv").append('<div ><input type="file" name="img[]" /&

jquery动态添加删除div--事件绑定,对象克隆

我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在phpchina问答区版主的热心帮助下解答了(答案在最后)        使用到的jquery方法和思想就是:事件的绑定和销毁(unbind),另外还可以使用clone,通过克隆可以很好的解决这个问题          相关描述如下 功能:点击增加,自动添加一个iptdiv 点击 iptdiv后的 X 自动删除当前div 问题:默认存在的(也就是页面加载进来的)的那个iptdiv 后的 X 点击有效,可以删除当前 iptdiv  但

给Jquery动态添加的元素添加事件

给Jquery动态添加的元素添加事件 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table>    <tbody>        <tr>        

[转载]给Jquery动态添加的元素添加事件

原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table> <tbody> <tr> <td

jquey学习2之jquery动态添加页面片段

第一个方法:append()方法 [1]$(selector).append(content)//向匹配的所有标签中的内容末尾处添加Html代码,会编译成页面显示. 1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 4 <script type="text/javascript&quo

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>