使用jQuery高效访问和操作HTML表格单元格教程

<table>
    <tr>
        <td id='rxc021'>初始文本1</td>
        <td id='rxc022'>初始文本2</td>
        <td>初始文本3</td>
    </tr>
    <tr>
        <td>另一行单元格1</td>
        <td>另一行单元格2</td>
        <td>另一行单元格3</td>
    </tr>
</table>

var allCells = $('table > tr > td');
console.log('选中的单元格数量:', allCells.length);

$(selector).each(function(index, element) {
    // index: 当前元素的索引（从0开始）
    // element: 当前遍历到的原生DOM元素
    // this: 指向当前遍历到的原生DOM元素
});

$('table > tr > td').each(function(index, tdElement) {
    var $cell = $(tdElement); // 将原生DOM元素包装成jQuery对象
    var cellValue = $cell.text(); // 获取单元格的文本内容
    var cellId = $cell.attr('id'); // 获取单元格的ID属性（如果存在）

    console.log(`单元格索引: ${index}, ID: ${cellId || '无'}, 内容: ${cellValue}`);

    // 示例：根据索引更新单元格内容
    if (index === 0) {
        $cell.text('更新后的第一个单元格');
    }
});

// 获取ID为'rxc021'的单元格内容
var cell1Text = $('#rxc021').text();
console.log('ID为rxc021的单元格文本:', cell1Text);

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

// 遍历所有单元格，如果内容包含“初始”，则替换为“已更新”
$('table td').each(function() {
    var $this = $(this);
    if ($this.text().includes('初始')) {
        $this.text($this.text().replace('初始', '已更新'));
    }
});

$('table > tr > td').each(function(index, tdElement) {
    var $cell = $(tdElement);
    var $parentRow = $cell.closest('tr'); // 获取当前单元格所在的行

    console.log(`单元格索引: ${index}, 所在行:`, $parentRow[0]); // [0]获取原生DOM元素

    // 示例：给偶数行的单元格添加特定样式
    if ($parentRow.index() % 2 === 0) { // $parentRow.index() 获取行在父元素中的索引
        $cell.css('background-color', '#f0f0f0');
    }
});

// 假设这是从服务器获取到的数据
const responseData = [
    { id: 'rxc021', value: 'AJAX数据1' },
    { id: 'rxc022', value: 'AJAX数据2' },
    { id: 'rxc023', value: 'AJAX数据3' }
];

// 模拟AJAX成功回调函数
function updateTableCells(data) {
    if (data && data.length > 0) {
        data.forEach(item => {
            const $targetCell = $(`#${item.id}`); // 通过ID选择目标单元格
            if ($targetCell.length) { // 确保单元格存在
                $targetCell.text(item.value); // 更新单元格的文本内容
                console.log(`已更新单元格 #${item.id} 为: ${item.value}`);
            }
        });
        $.MessageBox('表格数据已成功更新。'); // 假设有一个消息框插件
    } else {
        $.MessageBox('未获取到有效数据。');
    }
}

// 实际应用中，这会是一个AJAX请求
// $.ajax({
//     type: "POST",
//     url: "inc_tessera.php",
//     data: { id_socio_tessera: document.getElementById("frmId").value },
//     cache: false,
//     success: function(response){
//         // 假设response是解析后的数据对象或数组
//         updateTableCells(response);
//     },
//     error: function(){
//         $.MessageBox('数据加载失败。');
//     }
// });

// 为演示目的，直接调用更新函数
updateTableCells(responseData);

// 另一个场景：根据行索引和列索引更新
// 假设要更新第一行第三列的单元格
$('table > tr').eq(0).find('td').eq(2).text('第一行第三列新内容');