<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" /> <link href="../public/plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" /> <link rel="stylesheet" href="../public/plugins/fontawesome-free/css/all.min.css" /> <script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.js"></script> <style> td select, td input { height: 30px; width: 100%; } </style> </head> <body> <div class="container-fluid"> <div class="row mt-3"> <div class="col-12"> <div class="card"> <div class="card-header"> <button class="btn btn-info addItem1">add a item</button> <button class="btn btn-info getData1">get data</button> </div> <div class="card-body"> <table class="table table1 text-center"> <tbody> <tr class="bg-info text-center"> <th style="width: 20%">field1</th> <th style="width: 20%">field2</th> <th style="width: 20%">field3</th> <th style="width: 20%">field4</th> <th>op</th> </tr> <tr> <td>1</td> <td>33</td> <td>4</td> <td>5</td> <td>op</td> </tr> <tr> <td>2</td> <td>313</td> <td>4</td> <td>5</td> <td>op</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="row mt-3"> <div class="col-12"> <div class="card"> <div class="card-header"> <button class="btn btn-info addItem2">add a item</button> <button class="btn btn-info getData2">get data</button> </div> <div class="card-body"> <table class="table table2 text-center"> <tbody> <tr class="bg-info text-center"> <th style="width: 20%">field1</th> <th style="width: 20%">field2</th> <th style="width: 20%">field3</th> <th style="width: 20%">field4</th> <th>op</th> </tr> </tbody> </table> </div> </div> </div> </div> <div class="row mt-3"> <div class="col-12"> <div class="card"> <div class="card-header"> <button class="btn btn-info addItem3">add a item</button> <button class="btn btn-info getData3">get data</button> </div> <div class="card-body"> <table class="table table3 text-center"> <tbody> <tr class="bg-info text-center"> <th style="width: 20%">field1</th> <th style="width: 20%">field2</th> <th style="width: 20%">field3</th> <th style="width: 20%">field4</th> <th>op</th> </tr> </tbody> </table> </div> </div> </div> </div> <div id="editFormModal" class="m-4 p-4" style="display: none"> <form> <div class="row"> <div class="col-6 mb-2"> <div class="input-group mb-2"> <span class="input-group-text">field1</span> <input type="text" class="form-control" id="field1" name="field1" value="" /> </div> </div> <div class="col-6 mb-2"> <div class="input-group mb-2"> <span class="input-group-text">field2</span> <input type="text" class="form-control" id="field2" name="field2" value="" /> </div> </div> <div class="col-6 mb-2"> <div class="input-group mb-2"> <span class="input-group-text">field3</span> <select class="form-select" id="field3" name="field3"> <option selected value="">---</option> <option>1</option> <option>2</option> <option>3</option> </select> </div> </div> <div class="col-6 mb-2"> <div class="input-group mb-2"> <span class="input-group-text">field4</span> <input type="text" class="form-control" id="field4" name="field4" value="" /> </div> </div> </div> </form> </div> </div> </body> <script src="../public/plugins/jquery-1.9.1.js"></script> <script src="../public/plugins/sweetalert2.all.min.js"></script> <script> //-----------table1------------------- function showFormModal(domId, confirmFunc, didOpenFunc = function () {}) { Swal.fire({ html: $("#" + domId).html(), width: "90%", backdrop: true, showCloseButton: true, showCancelButton: true, focusConfirm: true, confirmButtonText: "Save", allowOutsideClick: false, allowEscapeKey: true, allowEnterKey: false, cancelButtonText: "No", didOpen: didOpenFunc, }).then((result) => { if (result.isConfirmed) { confirmFunc(); } }); } $(".getData1").on("click", function () { const res = []; $(".table1") .find("tr:not(:first-child)") .each(function (index, item) { res[index] = []; $(item) .find("td:not(:last-child)") .each(function (index1, item1) { res[index].push($(item1).text()); }); }); }); $(".table1").on("click", ".updateItem", function () { const tr = $(this).parent().parent(); const tdValues = tr.find("td:not(:last-child)").map(function (index, item) { return $(item).text(); }); showFormModal( "editFormModal", function () { const formdata = new FormData($("#swal2-html-container form")[0]); let row = "<tr>"; for (let [index, item] of formdata.entries()) { row += "<td>" + item + "</td>"; } row += '<td><a class="updateItem me-3" alt="update"><i class="bi bi-pencil-fill"></i></a> <a class="deleteItem" alt="delete"><i class="bi bi-trash-fill"></i></a></td></tr>'; tr.html(row); }, function () { // const inputs = Swal.getHtmlContainer().querySelectorAll(":input"); const inputs = $("#swal2-html-container form :input"); for (let i = 0; i < inputs.length; i++) { inputs[i].value = tdValues[i]; } } ); }); $(".addItem1").on("click", function () { const tbody = $(this).parents(".card").find("tbody"); showFormModal("editFormModal", function () { const formdata = new FormData($("#swal2-html-container form")[0]); let row = "<tr>"; for (let [index, item] of formdata.entries()) { row += "<td>" + item + "</td>"; } row += '<td><a class="updateItem me-3" alt="update"><i class="bi bi-pencil-fill"></i></a> <a class="deleteItem" alt="delete"><i class="bi bi-trash-fill"></i></a></td></tr>'; tbody.append(row); }); }); $("table").on("click", ".deleteItem", function () { $(this).parent().parent().remove(); }); //-----------table2------------------- $(".getData2").on("click", function () { const res = []; $(".table2") .find("tr:not(:first-child)") .each(function (index, item) { res[index] = []; $(item) .find("td:not(:last-child) :input") .each(function (index1, item1) { res[index].push($(item1).val()); }); }); console.log(res); }); $(".addItem2").on("click", function () { const tbody = $(this).parents(".card").find("tbody"); let row = `<tr> <td class="inputTd"> <span></span> <input type="text" class="tdInput" name="field1" style="display: none; " /> </td> <td class="inputTd"> <span></span> <input type="text" class="tdInput" name="field2" style="display: none; " /> </td> <td class="inputTd"> <span></span> <select class="tdInput" id="field3" name="field3" style="display: none;"> <option selected value="">---</option> <option>1</option> <option>2</option> <option>3</option> </select> </td> <td class="inputTd"> <span></span> <input type="text" class="tdInput" name="field4" style="display: none; " /> </td> <td> <a class="deleteItem" alt="delete"><i class="bi bi-trash-fill"></i></a> </td>`; tbody.append(row); }); $(".table2").on("click", ".inputTd", function () { $(this).find("span").hide(); $(this).find(".tdInput").show().focus(); }); $(".table2").on("blur", ".tdInput", function () { $(this).siblings().text($(this).val()).show(); $(this).hide(); }); //-----------table3------------------- $(".getData3").on("click", function () { const res = []; $(".table3") .find("tr:not(:first-child)") .each(function (index, item) { res[index] = []; $(item) .find("td:not(:last-child) :input") .each(function (index1, item1) { res[index].push($(item1).val()); }); }); console.log(res); }); $(".addItem3").on("click", function () { const tbody = $(this).parents(".card").find("tbody"); let row = `<tr> <td > <input type="text" name="field1" /> </td> <td "> <input type="text" name="field2"/> </td> <td > <select id="field3" name="field3" > <option selected value="">---</option> <option>1</option> <option>2</option> <option>3</option> </select> </td> <td > <input type="text"name="field4" /> </td> <td> <a class="deleteItem" alt="delete"><i class="bi bi-trash-fill"></i></a> </td>`; tbody.append(row); }); </script> </html>
原文地址：http://www.cnblogs.com/caroline2016/p/16905471.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
