时间戳

首页 > 解决方案 > 如何使用 JQuery 编辑和更新动态表中的值？

javascript - 如何使用 JQuery 编辑和更新动态表中的值？

问题描述

下面是用于将输入添加到动态表中的代码，并且对于每一行也会生成一个编辑按钮，我的问题是当我单击特定行的编辑按钮时如何将表中的值传递回输入字段和然后当我单击更新行按钮时，根据对输入字段中的值所做的更改来更新特定行。

$("#btnAdd").on('click', function() {
  let row = '<tr> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> </tr>'
  $('tbody').append(row);

  $('td:contains("edit")').html("<button type='button'>" + "edit" + "</button>").on('click', function() {

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <div>
    <label for="insert-name">Name:</label>
    <input type="text" id="insert-name">
  </div>
  <div>
    <label for="insert-surname">Surname:</label>
    <input type="text" id="insert-surname">
  </div>
</form>

<button type="button" id="btnAdd">Add to Table</button>
<button type="button" id="btnUpdate">Update row</button>

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Surname</th>
      <th scope="col">Edit</th>
    </tr>
  </thead>
  <tbody id="tbody"></tbody>
</table>

标签： javascriptjqueryhtml

解决方案

检查这个（阅读 JS 评论）

$("#btnAdd").on('click', function() {
    let row = '<tr> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> </tr>'
    $('tbody').append(row);

    $('td:contains("edit")').html("<button type='button' class='edit'>" + "edit" + "</button>").on('click', function() {

		});
});

//--------------------------------------------------------//

$(document).on("click",".edit",function(){ // Click function on class '.edit' (your appended button)
    var name = $(this).parents("tr").find("td:eq(0)").html(); // Search for 'name' depending on this edit button parent.
    var surname = $(this).parents("tr").find("td:eq(1)").html(); // Search for 'surname' depending on this edit button parent.
    var rowNumber = $(this).parents("tr").index() // Get index of this edit button parent 'row'.
    $("#edit-name").val(name); // Read the name and put it  in '#edit-name' inside '.editArea'.
    $("#edit-surname").val(surname); // Read the surname and put it  in '#edit-surname' inside '.editArea'.
    $(".saveEdits").attr("for",rowNumber); // Store this row index as attribute in '.saveEdits' button to be able to pass it to the other function that saves data.
    $(".editArea").fadeIn(300); // Show the edit box.
});

$(".saveEdits").click(function(){ // Function to save data
  var rowNumber = parseInt($(this).attr("for")); // Get the row number that we already define in the prev. function.
    $('td:eq(0)','tr:eq('+(rowNumber+1)+')').html($("#edit-name").val()); // Update 'td' content depending on the 'tr' index.
    $('td:eq(1)','tr:eq('+(rowNumber+1)+')').html($("#edit-surname").val()); // Update 'td' content depending on the 'tr' index.
});

$(".cancel").click(function(){ // Button to cancel edit.
  $("#edit-name").val(""); // Empty value.
  $("#edit-surname").val(""); // Empty value.
  $(".saveEdits").attr("for","0"); // Set row number to zero.
  $(".editArea").fadeOut(300); // Hide edit area.
});
.editArea{
  display:none;
  background:#fff;
  padding:10px;
  border:1px solid #ddd;
  border-radius:5px;
  box-shadow:0 0 0 #000;
  width:50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form>
      <div>
        <label for="insert-name">Name:</label>
        <input type="text" id="insert-name">
      </div>
      <div>
        <label for="insert-surname">Surname:</label>
        <input type="text" id="insert-surname">
      </div>
    </form>

    <button type="button" id="btnAdd">
      Add to Table
    </button>


    <table>
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Surname</th>
          <th scope="col">Edit</th>
        </tr>
      </thead>
      <tbody id="tbody">

      </tbody>
    </table>
    
    <div class='editArea'>
      <label>Name</label>
      <input type="text" id="edit-name">
      <br>
      <label>Surname</label>
      <input type="text" id="edit-surname">
      
      <hr>
      <button class='saveEdits' for="0">Save edits</button>
      <button class='cancel'>Cancel</button>
    </div>
    
  </body>
</html>

推荐阅读