使用jquery编辑表格行答案

【问题标题】：Editing table row using jquery使用jquery编辑表格行
【发布时间】：2020-01-03 18:51:33
【问题描述】：

我想为表格中选定的行添加编辑功能，将结果保存到 localStorage。

我想让用户能够在线编辑或重新填充表单字段，然后用户可以在其中进行编辑。两者都很棒。

我对编程完全陌生，因此可以肯定我缺乏知识是阻碍我理解如何根据我的代码实施解决方案的原因。

<table id="sprintTable">
  <thead>
    <tr>
      <th>Select</th>
      <th>Sprint Name</th>
      <th>Dev Phase</th>
      <th>Due Date</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr>
      <td><input type="checkbox" name="record"></td>
      <td>Introduction to Developing</td>
      <td>Committed</td>
      <td>July 17</td>
      <td style="background-color:rgb(5, 122, 15);color:rgb(5, 122, 15);">Status</td>
    </tr>
  </tbody>
</table>

<div class="sprintEditButtons">
  <button type="button" id="delete-sprint" class="action-button">Delete Sprint</button>
  <button type="button" id="edit-sprint" class="action-button">Edit Sprint</button>
</div>

【问题讨论】：

请分享你目前尝试过的代码
这不是免费的 write-my-code 或 do-my-research 服务。我们将帮助您完成您尝试解决的任务，您遇到了特定问题。如果您是编程新手并且不知道如何满足要求，那么最好的办法是学习有关您选择的技术的教程等，直到您有足够的了解以了解如何开始。如果我们只是给你写一个答案，那么你很可能无论如何都不会理解它，所以你不会真正学到很多东西。
作为一般提示，您首先需要学习如何处理用户输入事件（例如，检测按钮单击，然后在函数中运行一些代码作为结果）。然后您需要了解如何从 DOM（即代表您的 HTML 页面的对象模型）中添加和替换元素，以便您可以插入必要的表单字段。（或者您可以查看HTML5 contenteditable feature，看看这是否适合您的情况）。
明白了。我试图加载我的 jquery，但它没有被接受。我已经挣扎或尝试了好几天。谢谢你的指导。非常感谢
非常感谢，AD。有时只是获得结构，专注于如何解决是非常有帮助的。非常感谢！也感谢您在这里指导如何成为更好的用户。

标签： jquery tablerow

【解决方案1】：

//Data added on table when click on submit.

var edit_row = null;

$("#submit").on("click", function () {
    var fname = $("#fname").val();
    var lname = $("#lname").val();
    var number = $("#number").val();
    var row = "<tr><td class='first'>" +
        fname +
        "</td><td class='last'>" +
        lname +
        "</td><td class='mobile'>" +
        number +
        '</td><td><a href="" class="fas fa-edit edit text-primary" style="cursor:pointer"></a> <a class="fas fa-trash-alt dlt text-danger" style="cursor:pointer"></a></td></tr>';

    if (edit_row) {
        $("#myTable tbody").find($(edit_row)).replaceWith(row);
        edit_row = null;
    }
    else if ((fname != "" && lname != "" && number != "")) {
        $("#myTable tbody").append(row);
    }

// After submit all values are null using below codes.

    $("#fname").val('');
    $("#lname").val('');
    $("#number").val('');
});

// Data delete in table when click on delete button.

$(document).on('click', '.dlt', function () {
    $(this).parents('tr').remove();
    return false;
});

// Data again fill in form when click on edit.
    
$(document).on('click', '.edit', function () {
    edit_row = $(this).closest('tr');
    $("#fname").val($(this).closest('tr').find('.first').text());
    $("#lname").val($(this).closest('tr').find('.last').text());
    $("#number").val($(this).closest('tr').find('.mobile').text());
});


// Thank you.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image"
        href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoqksPBDeWpznZfj0_XtgkNO5npIUwP7n7n0GCXos3PGoEGHLwapvcf_qlnbXWf-bd-Us&usqp=CAU">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
    <style>
        .form-label {
            margin: 0%;
        }
    </style>

    <title>Edit and Delete</title>
</head>

<body>

    <!-- form -->

    <div class="container mt-5 d-flex justify-content-center">
        <form class="row" id="myForm">
            <div class="col-8">
                <label for="fname" class="form-label">First Name</label>
                <input type="text" class="form-control" id="fname" placeholder="First Name">
            </div>
            <div class="col-8 mt-3">
                <label for="lname" class="form-label">Last Name</label>
                <input type="text" class="form-control" id="lname" placeholder="Last Name">
            </div>
            <div class="col-8 mt-3">
                <label for="number" class="form-label">Mobile Number</label>
                <input type="tel" class="form-control" maxlength="10" minlength="10" id="number"
                    placeholder="Mobile Number">
            </div>
            <div class="col-12 mt-3">
                <button type="button" id="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>
    </div>

    <!-- Table -->

    <table class="table container mt-5" id="myTable">
        <thead>
            <tr>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Mobile Number</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <footer style="float: right;display: block;position: fixed;bottom: 20px;right: 20px;">Made by <a style="text-decoration: none;color: black;font-weight: 600;" href="https://www.instagram.com/_ridham_golakiya/">Ridham Golakiya</a></footer>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script>
    <script src="edit&delete.js"></script>
</body>

</html>

【讨论】：