如何点击数据表格任意行的Edit按钮？附777DDD记录操作示例

Got it, let's break this down for you. Here's how to target and trigger that Edit button—whether you need to hit one in any arbitrary row, or specifically the one tied to the 777DDD record you mentioned.

General: Click Edit Button in Any Row #

If you want to trigger the Edit button for a specific row (like the 3rd row, or the first row with a certain status), here are a couple straightforward approaches:

Using Row Index #

If you know the row's position (note: JavaScript uses zero-indexed counting for elements), you can target it directly:

// Using jQuery (common with DataTables)
$('#DataTables_Table_5 tbody tr:eq(2) .btn-group button:first').click();

// Using vanilla JavaScript
document.querySelector('#DataTables_Table_5 tbody tr:nth-child(3) .btn-group button:first').click();

(Quick note: :eq(2) targets the 3rd row since we start counting at 0; nth-child(3) does the same in vanilla JS)

Click All Edit Buttons (For Reference Only) #

If you ever needed to trigger every Edit button on the table (unlikely, but just in case):

// jQuery
$('#DataTables_Table_5 tbody .btn-group button:first').each(function() {
  $(this).click();
});

// Vanilla JS
document.querySelectorAll('#DataTables_Table_5 tbody .btn-group button:first').forEach(btn => btn.click());

Specific Example: Click Edit Button for the 777DDD Record #

This is the exact case you provided. We'll first find the row that contains 777DDD in one of its cells, then target the Edit button in that row.

Using jQuery (Most Common with DataTables) #

// Find the row with a <td> containing "777DDD", then click its Edit button
$('#DataTables_Table_5 tbody tr').has('td:contains("777DDD")').find('.btn-group button:first').click();

Using Vanilla JavaScript #

If you prefer not to rely on jQuery:

// Grab all table rows
const rows = document.querySelectorAll('#DataTables_Table_5 tbody tr');

// Loop through rows to find the one with "777DDD"
rows.forEach(row => {
  const cells = row.querySelectorAll('td');
  cells.forEach(cell => {
    if (cell.textContent.trim() === '777DDD') {
      // Trigger the Edit button in this row
      row.querySelector('.btn-group button:first').click();
      return; // Exit the loop once we find the right row
    }
  });
});

A Quick Heads-Up for Dynamic Tables #

If your table uses DataTables server-side processing or loads rows dynamically, wrap your code in a DataTables draw.dt listener to make sure it runs after the table finishes loading/updating:

$('#DataTables_Table_5').on('draw.dt', function() {
  // Paste your click trigger code here
});

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