如何为getItems函数生成的表格行添加匹配行信息的动态数据属性按钮？

Got it, let's make sure each button gets the exact item data tied to its row—no mismatches, no messy workarounds. Here's the cleanest way to implement this:

Step 1: Move Button Creation Inside the Data Loop #

Instead of bulk-adding buttons to all .cell4 cells after building rows, create and attach the button directly inside your data iteration. This guarantees each button uses the current row's Item_Id and name instead of risking mismatched data later.

Modify your success callback code like this:

success: function (data, status) {
  if (data == false) {
    clearTable();
  } else {
    clearTable(); // Start with a fresh table
    for (let i = 0; i < data.length; i++) {
      const currentItem = data[i];
      // First create the row as you already do
      createRow(i, currentItem.name, currentItem.Item_Id);
      
      // Target the .cell4 in this newly created row
      const currentCell4 = $('tr').eq(i).find('.cell4');
      
      // Build the button with dynamic data attributes using ES6 template strings
      const addToCartBtn = `
        <button class="btn-addToCart btn btn-success btn-rounded btn-sm my-0 my-cart-btn font-weight-bold"
                data-item-id="${currentItem.Item_Id}"
                data-item-name="${currentItem.name}">
          Add to Cart
        </button>
      `;
      
      // Append the button to the current row's cell4
      currentCell4.append(addToCartBtn);
    }
  }
}

Step 2: Why This Works #

• Proper Data Binding: By creating the button inside the loop, each button references the currentItem from its specific iteration—no chance of all buttons using the last item's data.
• HTML5-Compliant Data Attributes: data-item-id and data-item-name follow standard custom data attribute conventions, making them easy to access later.
• Cleaner Syntax: ES6 template strings (backticks `) eliminate messy string concatenation and quote escaping.

Step 3: Accessing the Data Later #

When you need to use the item data (like on button click), retrieve it with jQuery's .data() method:

// Example click handler for cart buttons
$(document).on('click', '.btn-addToCart', function() {
  const itemId = $(this).data('item-id'); // jQuery auto-converts to camelCase if you use .data('itemId')
  const itemName = $(this).data('item-name');
  
  console.log(`Adding item: ${itemName} (ID: ${itemId}) to cart`);
  // Insert your cart logic here
});

Alternative: Bulk Processing (Less Reliable) #

If you must keep the bulk append approach, use .each() to map each .cell4 to the corresponding data item. Note: This only works if the order of .cell4 elements exactly matches the data array:

success: function (data, status) {
  if (data == false) {
    clearTable();
  } else {
    clearTable();
    for (let i = 0; i < data.length; i++) {
      createRow(i, data[i].name, data[i].Item_Id);
    }
    
    // Map each .cell4 to the data array index
    $('.cell4').each(function(index) {
      const item = data[index];
      const addToCartBtn = `
        <button class="btn-addToCart btn btn-success btn-rounded btn-sm my-0 my-cart-btn font-weight-bold"
                data-item-id="${item.Item_Id}"
                data-item-name="${item.name}">
          Add to Cart
        </button>
      `;
      $(this).append(addToCartBtn);
    });
  }
}

The first approach is strongly recommended—it's more robust and avoids potential bugs if the DOM order ever changes.

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