鍍金池/ 問答/HTML/ jQuery提交表單，區(qū)分添加和編輯的不同操作

jQuery提交表單，區(qū)分添加和編輯的不同操作

程序概述：

1、一個表單（顯式）
2、一個模態(tài)框（隱式）：負責添加和編輯數(shù)據(jù)的功能
3、表單有添加，編輯，刪除按鈕

需求及問題：
添加功能和編輯功能是公用一個模態(tài)框，那么如何區(qū)分對待這兩個功能的數(shù)據(jù)提交

PS；我把代碼放codepen上了，方便的話可移步此傳送門：https://codepen.io/mengjielee...

源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clone</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .wrapper {
            background:rgba(0,0,0,.6);
            position:fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
        }
        .modal {
            position:absolute;
            top:50%;
            left:50%;
            width:200px;
            height:300px;
            margin-top:-150px;
            margin-left:-100px;
            background: silver;
            text-align: center;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<!--添加按鈕-->
<button id="add">添加</button>
<!--表格-->
<table border="1">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>愛好</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>lmj</td>
        <td>swim</td>
        <td>
            <input type="button" class="edit" value="編輯">
            <input type="button" class="del" value="刪除">
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>cly</td>
        <td>loving</td>
        <td>
            <input type="button" class="edit" value="編輯">
            <input type="button" class="del" value="刪除">
        </td>
    </tr>
    </tbody>
</table>
<!--模態(tài)框-->
<div class="wrapper hide">
    <div class="modal">
        <p>姓名<input type="text" id="uname"></p>
        <p>愛好<input type="text" id="uhabby"></p>
        <input type="submit" id="handle" value="確定">
        <input type="submit" id="cancle" value="取消">
    </div>
</div>

<script src="jquery-3.3.1.min.js"></script>
<script>
// 添加按鈕
$("#add").click(function () {
    $(".wrapper").removeClass("hide");
});

// 若點擊確定，則新建表格一條記錄
$("#handle").click(function () {

    // 保存用戶輸入的添加對象的值
    var unameVal = $("#uname").val();
    var uhobbyVal = $("#uhabby").val();
    // 克隆操作的兩個按鈕：編輯，刪除
    var $clEle = $("tbody tr:first").find("td:last").clone(true);


    // 序號自增
    // 方法一
    var $curEle = $("table tr:last");
    var indexVal = $($curEle.find("td")[0]).text();
    indexVal = Number(indexVal) + 1;

    // 方法二
    // var indexVal = $("table tr").length;

    //
    var newEle = document.createElement("tr");
    $(newEle).html("<td><td><td><td>");
    // 插入表格最后
    $(newEle).insertAfter($curEle);
    // 將事先保存的值初始化給新記錄
    $($(newEle)).find("td:first").text(indexVal);
    $($(newEle)).find("td").eq(1).text(unameVal);
    $($(newEle)).find("td").eq(2).text(uhobbyVal);
    $($(newEle)).find("td:last").html($clEle.html());


    $("#uname").val("");
    $("#uhabby").val("");
    $(".wrapper").addClass("hide");
});

// 若點擊取消，則清空文本框內(nèi)容
$("#cancle").click(function () {
    $("#uname").val("");
    $("#uhabby").val("");
    $(".wrapper").addClass("hide");
});

// 點擊編輯
$(".edit").click(function () {
    // 顯示模版框
    $(".wrapper").removeClass("hide");
    // 獲得當前記錄tr的對象
    // console.log($(this).parents().eq(1));
    var $tdEles = $(this).parents().eq(1).find("td");
    // 將當前行的值初始化文本框
    // console.log($tdEles.eq(1).text());
    // console.log($tdEles.eq(2).text());
    $("#uname").val($tdEles.eq(1).text());
    $("#uhabby").val($tdEles.eq(2).text());
});

// 點擊刪除
$(".del").click(function () {

    // 獲得當前記錄tr的對象
    // console.log($(this).parents().eq(1));
    $(this).parents().eq(1).remove();

});

</script>
</body>
</html>
回答
編輯回答
未命名

1.給對話框元素添加一個屬性isEdit，點擊添加按鈕的時候給這個屬性設置為false，點擊編輯的時候給這個屬性設置為true，在保存的時候獲取這個屬性判斷
2.當然也可以把isEdit存為全局變量

2017年8月15日 19:05
編輯回答
夢若殤

編輯事件

// 點擊編輯
$("table").on("click", ".edit", function () {
// $(".edit").click(function () {
    // 顯示模版框
    $(".wrapper").removeClass("hide");
    // 獲得當前記錄tr的對象
    // console.log($(this).parents().eq(1));
    var $tdEles = $(this).parents().eq(1).find("td");
    // 將當前行的值初始化文本框
    // console.log($tdEles.eq(1).text());
    // console.log($tdEles.eq(2).text());
    $("#uname").val($tdEles.eq(1).text());
    $("#uhabby").val($tdEles.eq(2).text());
    // 把當前編輯的這一行 jQuery對象 保存到.data("tr", $())里面
    $("#handle").data("key",$tdEles);
    // alert($("#handle").data());
});

確定事件

// 若點擊確定，則新建表格一條記錄
$("#handle").click(function () {
    // 保存用戶輸入的添加對象的值
    var unameVal = $("#uname").val();
    var uhobbyVal = $("#uhabby").val();
    // 克隆操作的兩個按鈕：編輯，刪除
    // var $clEle = $("tbody tr:first").find("td:last").clone(true);

    // 需要作判斷
    // 如果是新增操作
    // $().data("tr") 返回值如果是undefined就表示 不是編輯操作
    if ($(this).data("key") === undefined){
      // 序號自增
      // 方法一
      var $curEle = $("table tr:last");
      var indexVal = $($curEle.find("td")[0]).text();
      indexVal = Number(indexVal) + 1;

      // 方法二
      // var indexVal = $("table tr").length;
      //
      var newEle = document.createElement("tr");
      $(newEle).html("<td><td><td><td>");
      // 插入表格最后
      $(newEle).insertAfter($curEle);
      // 將事先保存的值初始化給新記錄
      $($(newEle)).find("td:first").text(indexVal);
      $($(newEle)).find("td").eq(1).text(unameVal);
      $($(newEle)).find("td").eq(2).text(uhobbyVal);
      // 將操作方法固定寫
      $($(newEle)).find("td").eq(3).html(`
        <input type="button" class="edit" value="編輯">
        <input type="button" class="del" value="刪除">
      `);
    }else{
      // 如果是編輯操作
      // 拿到用戶編輯之后的值 ，要將編輯的當前行指定位置的數(shù)據(jù)更新一下
      var $tdEles = $(this).data("key");
      // 從 .data()中取出之前保存的 那一行
      // 更新用戶編輯之后的值
      $tdEles.eq(1).text(unameVal);
      $tdEles.eq(2).text(uhobbyVal);
      // 將key對應的值 清空
      $(this).removeData("key");
    }
    // 操作方法采用克隆的形式
    // $("tbody tr:first").find("td:last").clone(true).insertAfter($($(newEle)).find("td").eq(2));

    // 清空文本框
    $("#uname").val("");
    $("#uhabby").val("");
    $(".wrapper").addClass("hide");
});
2017年7月31日 10:06