如何获取HTML表格ID并在jQuery中绑定函数？解决多表格定位问题

Got it, let's work through this problem since targeting React-generated tables can be tricky when they don't have a static ID or class. Here are reliable approaches you can try:

1. 优先给目标表格添加自定义静态属性（最推荐） #

If you have access to modify the page's code (or can coordinate with the React dev team to add this), add a custom data-* attribute to the table. This is the most stable method because it won't change when React re-renders:

<!-- 在React组件的表格标签中添加该属性 -->
<table data-table="target-order-list">...</table>

Then in your jQuery code, you can target it directly and get the row count:

const targetRowCount = $('table[data-table="target-order-list"] tr').length;

2. 利用表格的静态内容/结构特征 #

If you can't add custom attributes, look for unique static elements associated with the table:

• By unique header text: If the table has a distinct header (e.g., "Customer Order Details"), use the :has() and :contains() selectors to narrow it down:

  const targetTable = $('table:has(th:contains("Customer Order Details"))');
  const rowCount = targetTable.find('tr').length;
  

• By static parent container: If the table is wrapped inside a parent element with a fixed ID or class, chain selectors to target it precisely:

  // 假设表格在ID为"order-dashboard"的容器内
  const rowCount = $('#order-dashboard table tr').length;
  

3. 谨慎使用data-reactid（仅临时应急） #

The data-reactid is dynamically generated by React and can change after page refreshes or component re-renders, so it's not reliable for long-term use. But if you need a quick temporary fix, use the correct attribute selector (your original code had a syntax error—# is for IDs, not attributes):

// 用属性选择器定位，而非ID选择器
const rowCount = $('[data-reactid=".0.1.1.0.0.0"] tr').length;

Again, avoid this for production code since it's fragile to changes in React's rendering.

4. 基于表格的位置（最不推荐） #

If all else fails, you can target the table by its index on the page (jQuery uses 0-based indexing). Note that this will break if the page structure changes (e.g., a new table is added before your target):

// 定位页面上的第三个表格（索引为2）
const rowCount = $('table').eq(2).find('tr').length;

Why your original code didn't work #

Your selector $('#.0.1.1.0.0.0 tr') was invalid because # targets HTML IDs, but .0.1.1.0.0.0 is the value of the data-reactid attribute, not an ID. Even if you fixed the selector syntax, the dynamic nature of data-reactid makes it a poor choice for persistent targeting.

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