在jQuery中本地存储表的数据
在jQuery中本地存储表的数据
提问于 2022-07-21 16:00:29
我使用jQuery创建一个具有CRUD操作的表。我赋予该表排序和筛选数据的能力。排序和筛选函数与所有CRUD操作一样完美地工作。我必须把表的数据存储在本地存储器中。因为这个，我增加了一些代码。它不正确地在本地运行和存储数据。我需要正确地存储数组格式。我需要你的帮助来解决这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<title>CRUD Table jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-8">
<input id="searchfield" type="search" class="form-control" placeholder="Search...">
</div>
<div class="col-md-12 text-right">
<input type="button" id="btnAdd" class="btn btn-primary para" value="Add New" />
</div>
</div>
<div class="row pt-3">
<div class="col-md-12 col-sm-12 col-12 p-2 ">
<table id="tblData" class="table table-bordered table-hover table-striped">
<thead>
<tr id="headings">
<th class="num">ID</th>
<th class="text">Name</th>
<th class="text">Address</th>
<th class="num">Age</th>
<th class="tdaction">Action</th>
</tr>
</thead>
<tbody id="searchable">
</tbody>
</table>
</div>
</div>
</div>
<script>
var emptyNewRow = "<tr class='trNewRow'>";
emptyNewRow = emptyNewRow + "<td class='tdID'><input type='text' class='form-control txtID' /></td>";
emptyNewRow = emptyNewRow + "<td class='tdName'><input type='text' class='form-control txtName' /></td>";
emptyNewRow = emptyNewRow + "<td class='tdAddress'><input type='text' class='form-control txtAddress' /></td>";
emptyNewRow = emptyNewRow + "<td class='tdAge'><input type='text' class='form-control txtAge' /></td>";
emptyNewRow = emptyNewRow + "<td class='tdAction'><button class='btn btn-sm btn-success btn-save'> Save</button><button class='btn btn-sm btn-success btn-cancel'> Cancel</button></td>";
emptyNewRow = emptyNewRow + "</tr>";
var rowButtons ="<button class='btn btn-success btn-sm btn-edit' > Edit </button> <button class='btn btn-danger btn-sm' > Delete </button>";
var rowUpdateButtons ="<button class='btn btn-success btn-sm btn-save' > Update </button> <button class='btn btn-danger btn-sm btn-save' > Delete </button> ";
$(document).ready(function () {
$("#btnAdd").click(function () {
$("#tblData tbody").append(emptyNewRow);
});
$('#tblData').on('click', '.btn-save', function () {
const id = $(this).parent().parent().find(".txtID").val();
$(this).parent().parent().find(".tdID").html(""+id+"");
const name = $(this).parent().parent().find(".txtName").val();
$(this).parent().parent().find(".tdName").html(""+name+"");
const address = $(this).parent().parent().find(".txtAddress").val();
$(this).parent().parent().find(".tdAddress").html(""+address+"");
const age = $(this).parent().parent().find(".txtAge").val();
$(this).parent().parent().find(".tdAge").html(""+age+"");
$(this).parent().parent().find(".tdAction").html(rowButtons);
//local storage
let arr = JSON.parse(localStorage.getItem('Data'));
if(arr==null){
let data = ["ID " + id,"NAME "+name,"ADDRESS "+address,"AGE "+ age];
localStorage.setItem('Data', JSON.stringify(data));
}else{
arr.push(id,name,address,age);
localStorage.setItem('Data', JSON.stringify(arr));
}
});
$('#tblData').on('click', '.btn-danger', function () {
$(this).parent().parent().remove();
});
$('#tblData').on('click', '.btn-cancel', function () {
$(this).parent().parent().remove();
});
$('#tblData').on('click', '.btn-edit', function () {
const id =$(this).parent().parent().find(".tdID").html();
$(this).parent().parent().find(".tdID").html("<input type='text' value='"+id+"' class='form-control txtID' />");
const name =$(this).parent().parent().find(".tdName").html();
$(this).parent().parent().find(".tdName").html("<input type='text' value='"+name+"' class='form-control txtName' />");
const address =$(this).parent().parent().find(".tdAddress").html();
$(this).parent().parent().find(".tdAddress").html("<input type='text' value='"+address+"' class='form-control txtAddress' />");
const age =$(this).parent().parent().find(".tdAge").html();
$(this).parent().parent().find(".tdAge").html("<input type='text' value='"+age+"' class='form-control txtAge' />");
$(this).parent().parent().find(".tdAction").html(rowUpdateButtons);
});
//filtering
$("#searchfield").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#searchable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
//sorting
$('th').each(function (col) {
$(this).data("type", $(this).attr("class"));
$(this).click(function () {
var type = $(this).data("type");
var records = $("table").find("tbody > tr");
records.sort(function(x,y){
var val1 = $(x).children("td").eq(col).text();
var val2 = $(y).children("td").eq(col).text();
if (type == "num")
{
val1 *= 1;
val2 *= 1;
}
return (val1 < val2) ? -1 : (val1 > val2 ? 1 :0)
});
$.each(records, function(index, row){
$("tbody").append(row);
});
});
});
});
</script>
</body>
</html>Stack Overflow用户
发布于 2022-07-22 08:54:34
如果需要序列化整个表内容，以更新以前保存的值，则可以选择跟踪已更改的行并只更新状态的该部分。但是，与从零开始保存整个表和用新的序列化状态替换以前的序列化状态相比，它需要付出很大的努力。
我在这里只关注这个任务:如何以结构化的方式序列化您的表，如何将每一行作为具有键值对的对象tdClassName-inputValue。
我推断了您在代码段中的表，并用一些示例数据填充了它。然后，我添加了一个新按钮，该按钮触发逻辑，将其内容转储到将由dumpTable()函数返回的变量中。
单击该按钮时，它将在控制台上打印包含表保存状态的对象。您可以在代码中复制该逻辑，以便在替换存储中的json数据之前调用该函数。
function dumpClickHandler() {
const dataTable = dumpTable();
console.log(dataTable);
}
function dumpTable() {
const dataTable = [];
//fetch table rows and iterate through all of them
const rows = document.querySelectorAll('#tblData tbody tr');
for (const row of rows) {
const dataRow = {};
//fetch row fields
const fields = row.querySelectorAll('td');
//for each field in row
for (const field of fields) {
//skip the action field containing buttons
if (field.classList.contains('tdAction'))
continue;
//fetch field name using the class assigned to the table cell
const fieldName =
Object.values(field.classList).filter(className => className.startsWith("td"))?.[0];
//fetch field value
dataRow[fieldName] = field.querySelector('input')?.value;
}
//push the fetched row in the array
dataTable.push(dataRow);
}
return dataTable;
}h1{
margin: 2rem 0 2rem 0 !important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container col-10">
<h1>Table filled with sample data:</h1>
<table id="tblData" class="table table-bordered table-hover table-striped">
<thead>
<tr id="headings">
<th class="num">ID</th>
<th class="text">Name</th>
<th class="text">Address</th>
<th class="num">Age</th>
<th class="tdaction">Action</th>
</tr>
</thead>
<tbody id="searchable">
<tr class="trNewRow">
<td class="tdID">
<input type="text" class="form-control txtID" value="1">
</td>
<td class="tdName">
<input type="text" class="form-control txtName" value="Name1">
</td>
<td class="tdAddress">
<input type="text" class="form-control txtAddress" value="Address1">
</td>
<td class="tdAge">
<input type="text" class="form-control txtAge" value="10">
</td>
<td class="tdAction">
<button class="btn btn-sm btn-success btn-save">Save</button>
<button class="btn btn-sm btn-success btn-cancel">Cancel</button>
</td>
</tr>
<tr class="trNewRow">
<td class="tdID">
<input type="text" class="form-control txtID" value="2">
</td>
<td class="tdName">
<input type="text" class="form-control txtName" value="Name2">
</td>
<td class="tdAddress">
<input type="text" class="form-control txtAddress" value="Address2">
</td>
<td class="tdAge">
<input type="text" class="form-control txtAge" value="20">
</td>
<td class="tdAction">
<button class="btn btn-sm btn-success btn-save"> Save</button>
<button class="btn btn-sm btn-success btn-cancel"> Cancel</button>
</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" onclick="dumpClickHandler();">DUMP TABLE CONTENT</button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73069360
复制相关文章
相似问题
腾讯云开发者
