求助：修复JavaScript动态表格的Edit/Delete按钮功能

Hey there! Let's get those Edit and Delete buttons working smoothly—you've already nailed the add functionality, which is a huge win. The main issues here are duplicate IDs (IDs must be unique on a page) and not using event delegation for dynamically added elements (since your buttons don't exist when the page first loads, regular click listeners won't catch them).

Here's a beginner-friendly fix with clear explanations:

Key Issues We'll Fix #

• Replace duplicate id="edbutt"/id="debutt" with classes (since we'll have multiple buttons with the same purpose)
• Use jQuery's event delegation to listen for clicks on dynamic buttons
• Add working Delete functionality
• Add a simple Edit → Save workflow to update table rows

Modified JavaScript Code #

let $next = $('#nextInfo');
$next.hide();
$('#Amor').on('click', function(e) {
  e.preventDefault();
  $next.fadeIn(500);
})

function formClear() {
  $('#name').val('');
  $('#sex').val('');
  $('#dob').val('');
  $('#state').val('');
  $('#class').val();
  // Reset Add button text when clearing form
  $('#Add').val('Add');
}

function addTable() {
  let $nam = $('#name').val();
  let $sex = $('#sex').val();
  let $dob = $('#dob').val();
  let $state = $('#state').val();
  let $class = $('#class').val();
  
  // Use CLASSES instead of IDs for Edit/Delete buttons (no duplicates!)
  const newRow = `
    <tr>
      <td><button type="button" class="edit-btn">Edit</button></td>
      <td class="name-cell">${$nam}</td>
      <td class="sex-cell">${$sex}</td>
      <td class="class-cell">${$class}</td>
      <td class="dob-cell">${$dob}</td>
      <td class="state-cell">${$state}</td>
      <td><button type="button" class="delete-btn">Delete</button></td>
    </tr>
  `;
  
  $('table tbody').append(newRow);
  formClear();
  $next.fadeOut(500);
};

// Add row on button click (handles both Add and Save)
$('#Add').on('click', function() {
  // If button says "Save", we're updating a row instead of adding
  if ($(this).val() === 'Save') {
    const $rowToUpdate = $(this).data('editRow');
    // Update the row's cells with form values
    $rowToUpdate.find('.name-cell').text($('#name').val());
    $rowToUpdate.find('.sex-cell').text($('#sex').val());
    $rowToUpdate.find('.class-cell').text($('#class').val());
    $rowToUpdate.find('.dob-cell').text($('#dob').val());
    $rowToUpdate.find('.state-cell').text($('#state').val());
    // Reset form and button
    formClear();
    $next.fadeOut(500);
    return;
  }
  // Otherwise, add a new row
  addTable();
});

// Event delegation for Delete buttons (works on dynamic elements)
$('table tbody').on('click', '.delete-btn', function() {
  // Get the parent row of the clicked button and remove it
  $(this).closest('tr').remove();
});

// Event delegation for Edit buttons
$('table tbody').on('click', '.edit-btn', function() {
  const $row = $(this).closest('tr');
  // Fill form with row data
  $('#name').val($row.find('.name-cell').text());
  $('#sex').val($row.find('.sex-cell').text());
  $('#dob').val($row.find('.dob-cell').text());
  $('#class').val($row.find('.class-cell').text());
  $('#state').val($row.find('.state-cell').text());
  // Switch Add button to Save
  $('#Add').val('Save');
  // Store reference to the row we're editing
  $('#Add').data('editRow', $row);
  // Show the form
  $next.fadeIn(500);
});

Modified CSS Code #

Update the button styles to target classes instead of duplicate IDs:

#nextInfo {
  border: 1px blue solid;
  margin-top: 50px;
  width: 500px;
  margin: 0px auto;
  text-align: center;
  height: 500px;
  border-radius: 5px;
}
#upper {
  background: rgb(85, 109, 204);
  height: 50px;
  margin-left: 0px;
  color: #fff;
  width: 498px;
  padding-top: 10px;
}
input {
  width: 350px;
  border-radius: 2px;
  height: 30px;
}
.mu {
  margin-left: -325px;
}
.me {
  margin-left: -320px;
}
#Add {
  height: 35px;
  width: 50px;
  margin-top: 50px;
  margin-left: -300px;
}
/* Target classes instead of unique IDs */
.delete-btn {
  background: blue;
  border: 1px solid rgb(39, 39, 180);
  color: #fff;
}
.delete-btn:hover {
  background: rgb(136, 136, 212);
}
.edit-btn {
  background: blue;
  border: 1px solid rgb(39, 39, 180);
  color: #fff;
}
.edit-btn:hover {
  background: rgb(136, 136, 212);
}

HTML Code (No Major Changes) #

Your existing HTML works fine—just ensure the table <tbody> exists (which it does) to support event delegation.

How This Works #

1. Unique Classes: Instead of repeating IDs like edbutt, we use .edit-btn and .delete-btn classes. Classes are designed for multiple elements with identical style/behavior.
2. Event Delegation: By binding clicks to the <tbody> (which loads with the page), we can catch clicks on any buttons inside it—even those added dynamically later.
3. Edit Workflow: Clicking Edit fills the form with the row's data, switches the Add button to Save, and stores a reference to the row being edited. Clicking Save updates the row and resets the form.
4. Delete Workflow: Clicking Delete finds the closest parent <tr> and removes it immediately.

You've got this—test it out, and let me know if you need any clarification on any part!

内容的提问来源于stack exchange，提问作者Gbambor Jnr