jquery简单crud操作
<!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>
版权声明：本文为carol2014原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。