基于jQuery实现表格重复字段的插入限制功能开发咨询

Hey Carol! Let's work through this repeater field logic step by step to get exactly the behavior you need. Here's a practical implementation that covers both scenarios:

Core Logic Breakdown #

First, we need two key functionalities:

• Check for "Test Product2" presence: Disable the "add new field" button until this product exists in the table.
• Dynamic event handling: Since we'll be adding elements on the fly, we need event delegation to make sure new buttons work correctly.

Full Code Implementation #

// Helper function to check if "Test Product2" exists and update button state
function toggleAddFieldButton() {
  // Use a precise selector to avoid false matches (adjust if your table structure differs)
  const hasTestProduct2 = $('.table tbody').find('td:contains("Test Product2")').length > 0;
  
  // Assume your "add new field" button uses this class - adjust to match your actual button
  $('.btn-add-new-field').prop('disabled', !hasTestProduct2);
}

$(document).ready(function() {
  // Initialize button state on page load
  toggleAddFieldButton();

  // Handle clicks on "Add Test Product2" buttons (supports dynamically added buttons)
  $('.table').on('click', '.btn.btn-dark.btn-sm.product2', function() {
    // Replace this with your actual row template - customize columns/buttons as needed
    const product2Row = `
      <tr>
        <td>Test Product2</td>
        <td>
          <button class="btn btn-dark btn-sm product2">Add Test Product2</button>
        </td>
      </tr>
    `;
    
    // Append the new row to the table body
    $('.table tbody').append(product2Row);
    
    // Update the "add new field" button state after adding the product
    toggleAddFieldButton();
  });

  // Handle clicks on "Add New Field" button (only works when enabled)
  $('.btn-add-new-field').on('click', function() {
    // Exit early if button is disabled
    if ($(this).is(':disabled')) return;
    
    // Replace this with your new field row template - include the blue button + "Add Test Product2" button
    const newFieldRow = `
      <tr>
        <td>New Custom Field</td>
        <td>
          <button class="btn btn-primary btn-sm">Edit Field</button>
          <button class="btn btn-dark btn-sm product2">Add Test Product2</button>
        </td>
      </tr>
    `;
    
    // Append the new field row to the table
    $('.table tbody').append(newFieldRow);
  });
});

Key Notes to Customize #

• Selector Adjustments:
  • Replace .btn-add-new-field with the actual class/ID of your "add new field" button.
  • If your table uses a specific structure (like a dedicated tbody), make sure the selectors match to avoid targeting the wrong elements.
  • For more reliable detection of "Test Product2", consider adding a data-product="Test Product2" attribute to the row/column and using $('[data-product="Test Product2"]') instead of :contains().
• Row Templates:
  • Modify the HTML strings (product2Row and newFieldRow) to match your table's existing column structure and button styles.
• Edge Cases:
  • If users can delete rows, add a call to toggleAddFieldButton() after any deletion to recheck if "Test Product2" is still present (and disable the add button if it's removed).

This implementation will:

• Start with the "add new field" button disabled if no "Test Product2" exists.
• Enable the button as soon as the first "Test Product2" is added.
• Let you add as many "Test Product2" rows as needed, including those attached to new fields.

内容的提问来源于stack exchange，提问作者Carol.Kar