使用 Jquery 编辑 HTML 表格（使用按钮添加文本框）
[英]Edit the HTML table using Jquery( adding text boxes using buttons)
问题描述
我是 jquery 的初学者。 我已经使用 javascript 动态创建了一个表。 我想编辑表格并保存它。 我为每行放置了 2 个按钮。 当我单击编辑按钮时，我想向其中添加文本框，当我单击保存按钮时，它应该将其保存在数据库中。 我的 Jquery 代码不正确。 我用过表ID。 它不起作用。 请帮忙。 提前致谢
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="content">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>how to get data from ajax request in node js</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<style>
td {
pointer-events: none;
}
</style>
<div class="container">
<table class="table my-4" id="tableId">
<tbody id="myTable">
</tbody>
</table>
</div>
<script>
var role =2;
var permissions = {
1: {
columns: [
"Id",
"firstName",
"lastName",
"email",
"dateofbirth",
"address",
"phoneNumber",
"feesPaid",
"password",
"actions"
],
},
2: {
columns: ["Id", "firstName", "lastName", "address", "actions"],
},
3: {
columns: ["Id", "firstName", "email", "phoneNumber", "actions"],
},
};
createDynamicTable();
let url = "http://localhost:3000/students";
var myarray = [];
fetch(url).then((data) => {
return data.json();
}).then((completedata) => {
buildtable(completedata.data);
var table = document.getElementById("myTable");
var rows = table.rows.length;
console.log(rows);
});
function buildtable(data) {
var table = document.getElementById('myTable');
for (var i = 0; i < data.length; i++) {
var row = `<tr>`;
if (permissions[role].columns.includes("Id")) {
var id = `<td>${data[i].Id}</td>`
row = row + id;
}
if (permissions[role].columns.includes("firstName")) {
var firstName = `<td>${data[i].firstName}</td>`
var row = row + firstName;
}
if (permissions[role].columns.includes("lastName")) {
var lastName = `<td>${data[i].lastName}</td>`
var row = row + lastName;
}
if (permissions[role].columns.includes("email")) {
var email = `<td>${data[i].email}</td>`
var row = row + email;
}
if (permissions[role].columns.includes("dateofbirth")) {
var dateOfBirth = `<td>${data[i].dateofbirth}</td>`
var row = row + dateOfBirth;
}
if (permissions[role].columns.includes("address")) {
var address = `<td>${data[i].address}</td>`
var row = row + address;
}
if (permissions[role].columns.includes("phoneNumber")) {
var phoneNumber = `<td>${data[i].phoneNumber}</td>`
var row = row + phoneNumber;
}
if (permissions[role].columns.includes("feesPaid")) {
var feesPaid = `<td>${data[i].feesPaid}</td>`
var row = row + feesPaid;
}
if (permissions[role].columns.includes("password")) {
var password = `<td>${data[i].password}</td>`
var row = row + password;
}
var closeRow =`</tr>`
row = row + closeRow;
table.innerHTML += row;
}
let tr = document.querySelectorAll("tr:not(:first-child)");
let button = document.createElement("button");
button.className = "btn_buy";
Array.from(tr).forEach(function (trArray) {
let button = document.createElement("button");
td = document.createElement("td");
button.innerText = "edit";
button.className = "btn_buy";
td.append(button);
trArray.append(td);
let button2 = document.createElement("button");
let td2 = document.createElement("td");
button2.innerText = "save";
button2.className = "btn_buyd";
td2.append(button2);
trArray.append(td2);
});
table.innerHTML += row;
}
function createDynamicTable(){
var table = document.getElementById('myTable');
if(role == 1){
var orderArrayHeader = permissions["1"].columns;
}
else if (role == 2){
var orderArrayHeader = permissions["2"].columns;
}
else if (role == 3){
var orderArrayHeader = permissions["3"].columns
}
var thead = document.createElement('thead');
table.appendChild(thead);
for (var i = 0; i < orderArrayHeader.length; i++) {
thead.appendChild(document.createElement("th")).
appendChild(document.createTextNode(orderArrayHeader[i]));
}
}
$("#tableId.cell").click(function (e) {
console.log('1');
if ($(this).find('input').length) {
return;
}
var input = $("<input type='text' size='5' />").val($(this).text());
$(this).empty().append(input);
$(this).find('input')
.focus(function (e) {
if ($(this).val() == '0.00' || $(this).val() == '0') { $(this).val(''); }
}).keydown(function (event) {
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 190 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
}).blur(function (e) {
if ($(this).val() != "") {
if (!isNaN(parseFloat($(this).val()))) {
var val1 = parseFloat($(this).val()).toFixed(2);
$(this).val(val1);
$(this).parent('td').text(
$(this).val()
);
}
}
else {
$(this).parent('td').text("0.00");
}
});
});
$(function () {
$('table tr td').hover(function () {
$(this).css('background-color', '#FFFFB0');
},
function () {
$(this).css('background-color', '#F4F4F4');
});
});
1 个解决方案
解决方案1
0 2022-07-21 04:37:23
欢迎开发。 好的选择。
我认为它是每行的两个版本。 单元格中带有表单元素的可编辑版本，或者带有包含数据的标签或跨度的视图模式。
无论您是水平切换一个单元格还是替换整行，您都需要两组按钮：
编辑和删除 // 保存并丢弃
当您进入和退出编辑模式时，您可以在两者之间旋转。
使用jQuery或普通Javascript访问HTML输入文本框的数组
[英]Accessing an array of HTML input text boxes using jQuery or plain Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.