如何在Datatables中点击按钮后用alert展示多行选中数据（附代码求助）

Hey Rajasekhar, let's get this sorted out! I've put together a straightforward implementation that lets you select multiple table rows and shows their data in an alert when you click the button. Here's how it works:

Step 1: HTML Structure #

First, set up your table with checkboxes for each row, plus a trigger button:

<table id="userTable">
  <thead>
    <tr>
      <th>Select</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="row-checkbox"></td>
      <td>Alice</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="row-checkbox"></td>
      <td>Bob</td>
      <td>32</td>
      <td>London</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="row-checkbox"></td>
      <td>Charlie</td>
      <td>24</td>
      <td>Paris</td>
    </tr>
  </tbody>
</table>

<button id="show-selected-btn">Show Selected Rows</button>

Step 2: JavaScript Logic #

Add this script to handle the button click and extract selected row data:

// Get the button element
const showBtn = document.getElementById('show-selected-btn');

// Add click event listener
showBtn.addEventListener('click', () => {
  // Grab all checked row checkboxes
  const checkedCheckboxes = document.querySelectorAll('.row-checkbox:checked');
  const selectedRowsData = [];

  // Loop through each checked checkbox to fetch row data
  checkedCheckboxes.forEach(checkbox => {
    // Get the parent row of the checkbox
    const row = checkbox.closest('tr');
    // Extract data from each cell (adjust indices based on your table columns)
    const name = row.cells[1].textContent.trim();
    const age = row.cells[2].textContent.trim();
    const city = row.cells[3].textContent.trim();
    
    // Push formatted data to the array
    selectedRowsData.push(`Name: ${name}, Age: ${age}, City: ${city}`);
  });

  // Show the result in alert
  if (selectedRowsData.length > 0) {
    alert('Selected Rows Data:\n' + selectedRowsData.join('\n'));
  } else {
    alert('No rows have been selected yet!');
  }
});

Key Notes: #

• Checkbox Selection: We use the :checked pseudo-selector to target only the checkboxes that are selected.
• Row Identification: closest('tr') is a reliable way to get the parent row of each checkbox, even if your table structure has nested elements.
• Data Extraction: Adjust the cell indices (row.cells[1], row.cells[2], etc.) to match the positions of your actual data columns.
• User Feedback: We added a fallback alert for when no rows are selected, so users don't get confused by an empty alert.

This should work seamlessly for your use case. Let me know if you need to tweak it to match your existing table structure!

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