<!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>
标签：jquery,function,const,index,crud,item,简单,find,row From： https://www.cnblogs.com/caroline2016/p/16905471.html