如何使用jQuery将HTML表格指定列值复制到另一HTML表格列？

Since you've already added unique CSS classes to each column in Table1 (myclass0, myclass1, etc.), we can leverage those classes to target specific columns and copy their values to Table2's corresponding columns. Here's how to implement this with jQuery, integrating seamlessly with your existing code:

Step-by-Step Implementation #

1. Ensure Table2 exists in your DOM: Make sure Table2 is present (either statically defined or dynamically created) with the columns you want to populate. For example:

   <table id="table2">
     <thead>
       <tr>
         <th>Customer ID</th> <!-- Will get data from Table1's myclass0 -->
         <th>Customer Name</th> <!-- Will get data from Table1's myclass1 -->
       </tr>
     </thead>
     <tbody></tbody>
   </table>
   

2. Add the copy logic right after Table1 is rendered: Insert this code immediately after $("#dvCSV").append(table); in your existing script:

   // Get all rows from the newly rendered Table1
   const table1Rows = $("#dvCSV table tr");
   const table2Body = $("#table2 tbody");
   
   // Clear existing rows in Table2 (remove this line if you want to keep existing rows)
   table2Body.empty();
   
   // Iterate through each row in Table1
   table1Rows.each(function(index) {
     // Skip the header row if your CSV includes one (remove this line if you want to copy the header)
     if (index === 0) return;
   
     // Fetch values from specific columns in Table1 using their CSS classes
     const customerId = $(this).find(".myclass0").text().trim();
     const customerName = $(this).find(".myclass1").text().trim();
   
     // Create a new row for Table2 and populate it with the copied values
     const newRow = $("<tr>");
     newRow.append(`<td>${customerId}</td>`);
     newRow.append(`<td>${customerName}</td>`);
   
     // Add the populated row to Table2's body
     table2Body.append(newRow);
   });
   

Key Notes for Customization #

• Target Specific Columns: Adjust the class selectors (.myclass0, .myclass1, etc.) to match exactly which columns you want to copy from Table1.
• Handle Headers: The if (index === 0) return; line skips the first row (assumed to be a header). Remove this if you want to copy the header row to Table2 as well.
• Map to Any Table2 Columns: You can rearrange the order of <td> elements in the new Table2 row to match your desired column mapping (e.g., copy Table1's myclass3 to Table2's second column).
• Edge Case Handling: Add checks for empty values or rows to avoid cluttering Table2 (e.g., if (!customerId && !customerName) return; to skip empty rows).

Example: Copy Multiple Columns #

If you need to copy more columns, expand the logic like this:

// Inside the each loop:
const email = $(this).find(".myclass2").text().trim();
const phoneNumber = $(this).find(".myclass4").text().trim();

// Add these to the new Table2 row
newRow.append(`<td>${email}</td>`);
newRow.append(`<td>${phoneNumber}</td>`);

This approach is flexible and works with any number of columns you need to transfer between the tables. Just adjust the class selectors and row structure to fit your exact requirements.

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