jQuery表格单元格操作教程：高效选择与数据更新

// 选择页面上所有表格内的所有<td>元素
$('table td');

// 如果只想选择特定ID表格内的单元格
$('#myTable td');

<table>
    <tr>
        <td id='rxc021'>文本内容1</td>
        <td id='rxc022'>按钮1</td>
        <td id='rxc023'>按钮2</td>
    </tr>
    <tr>
        <td id='rxc121'>文本内容2</td>
        <td id='rxc122'>按钮3</td>
        <td id='rxc123'>按钮4</td>
    </tr>
</table>

<script>
$(document).ready(function() {
    // 遍历所有表格中的<td>元素
    $('table > tr > td').each(function(index, tdElement) {
        // 将当前的DOM元素包装成jQuery对象
        var $cell = $(tdElement);

        // 获取单元格的文本内容
        var cellText = $cell.text();

        // 获取单元格的ID属性
        var cellId = $cell.attr('id');

        // 获取当前单元格的父<tr>元素
        var $parentRow = $cell.closest('tr');

        console.log(`单元格ID: ${cellId}, 文本内容: ${cellText}`);
        // 可以对$parentRow进行其他操作，例如获取行索引
        // console.log(`所在行索引: ${$parentRow.index()}`);
    });
});
</script>

// 直接通过ID选择单元格并设置其文本内容
$('#rxc021').text('新文本内容');

// 获取ID为'rxc022'的单元格的HTML内容
var htmlContent = $('#rxc022').html();
console.log(htmlContent);

// 假设我们要更新表格的第一行（索引0）的第二个单元格（索引1）
// 使用:eq()选择器
$('table tr:eq(0) td:eq(1)').text('更新后的第二个单元格');

// 使用:nth-child()选择器（注意这里是1-based索引）
// 选择第一行（nth-child(1)）的第三个单元格（nth-child(3)）
$('table tr:nth-child(1) td:nth-child(3)').html('<b>新按钮内容</b>');

// 查找所有包含特定文本“按钮”的单元格，并改变其背景色
$('table td:contains("按钮")').css('background-color', 'lightblue');

// 查找具有特定data属性的单元格
// 假设有 <td data-type="header">...</td>
$('table td[data-type="header"]').addClass('table-header');

// 更新ID为'rxc021'的单元格为纯文本
$('#rxc021').text('这是纯文本内容');

// 更新ID为'rxc023'的单元格为HTML内容
$('#rxc023').html('<button>点击我</button>');

// 模拟一个AJAX请求
$.ajax({
    type: "POST",
    url: "inc_data.php", // 实际的服务器接口
    data: { request_id: 123 },
    cache: false,
    success: function(response) {
        // 假设服务器返回一个JSON数组，包含要更新的单元格数据
        // 例如：response = [{id: 'rxc021', value: '最新数据A'}, {id: 'rxc121', value: '最新数据B'}]
        // 或者 response = ['新值1', '新值2', '新值3']，按顺序更新

        if (response && response.length > 0) {
            // 场景1: 如果服务器返回的是一个数组，按顺序更新表格的某一列
            // 假设我们要更新每行的第一个<td>
            $('table > tbody > tr').each(function(index, tr) {
                if (index < response.length) {
                    // 更新当前行的第一个单元格的文本
                    $(tr).find('td:eq(0)').text(response[index]);
                }
            });

            // 场景2: 如果服务器返回的是一个对象数组，包含要更新的单元格ID和值
            // response = [{cellId: 'rxc021', data: '数据A'}, {cellId: 'rxc022', data: '数据B'}]
            // $.each(response, function(i, item) {
            //     $('#' + item.cellId).text(item.data);
            // });

            console.log('表格数据已成功更新。');
        } else {
            console.log('没有数据需要更新。');
        }
    },
    error: function() {
        console.error('数据加载失败。');
    }
});