使用 Jquery 编辑 HTML 表格（使用按钮添加文本框）

Question

I am a beginner at jquery.我是 jquery 的初学者。 I have created a table dynamically using javascript.我已经使用 javascript 动态创建了一个表。 I wanted to edit the table and also save it.我想编辑表格并保存它。 I have put 2 buttons for each row.我为每行放置了 2 个按钮。 When I click the edit button i want to add text boxes to it and when I click the save button it should save it in the database.当我单击编辑按钮时，我想向其中添加文本框，当我单击保存按钮时，它应该将其保存在数据库中。 My Jquery code is not correct.我的 Jquery 代码不正确。 I have used table id.我用过表ID。 It doesn't work.它不起作用。 Please help.请帮忙。 Thanks in advance提前致谢

<!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');
                    });
            });

Answer 1

Welcome to development.欢迎开发。 good choice.好的选择。

i think of it as two version of each row.我认为它是每行的两个版本。 an editable version with form elements in the cells, or the view mode with labels or spans containing data.单元格中带有表单元素的可编辑版本，或者带有包含数据的标签或跨度的视图模式。

Whether you switch out cell by cell horizontally or replace the whole row, you'll need two sets of buttons:无论您是水平切换一个单元格还是替换整行，您都需要两组按钮：

edit & delete // Save & discard编辑和删除 // 保存并丢弃

you pivot between the two as you go in and out of edit mode.当您进入和退出编辑模式时，您可以在两者之间旋转。

使用 Jquery 编辑 HTML 表格（使用按钮添加文本框）

问题描述

1 个解决方案

解决方案1
0 2022-07-21 04:37:23

使用 Jquery 编辑 HTML 表格（使用按钮添加文本框）

问题描述

1 个解决方案

解决方案1 0 2022-07-21 04:37:23

解决方案1
0 2022-07-21 04:37:23