使用JS/JQuery动态添加表格行及读取单元格内容技术咨询

嘿，我来帮你搞定这个动态表格的需求——既要能动态添加行，又能读取任意单元格的内容对吧？我基于你提供的表格模板，整理了完整的可运行代码，直接就能用：

完整HTML结构 #

首先补全你给的模板（把未写完的添加按钮补好）：

<table id="tblCustomers" cellpadding="0" cellspacing="0" border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Country</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <!-- 动态添加的行会放在这里 -->
    </tbody>
    <tfoot>
        <tr>
            <td><input type="text" id="txtName" placeholder="Enter name" /></td>
            <td><input type="text" id="txtCountry" placeholder="Enter country" /></td>
            <td><input type="button" id="btnAdd" value="Add Row" /></td>
        </tr>
    </tfoot>
</table>
<!-- 用来展示读取到的内容 -->
<div id="contentDisplay" style="margin-top:15px; padding:10px; border:1px solid #ccc;"></div>

jQuery实现代码 #

接下来是核心的JS逻辑，包含添加行和读取单元格内容两个功能：

$(document).ready(function() {
    // 1. 动态添加行功能
    $('#btnAdd').click(function() {
        // 获取输入框的值并去除首尾空格
        var name = $('#txtName').val().trim();
        var country = $('#txtCountry').val().trim();
        
        // 校验输入不为空，避免生成空行
        if(name === '' || country === '') {
            alert('请填写完整的姓名和国家信息！');
            return;
        }
        
        // 拼接新行的HTML，包含内容和操作按钮
        var newRow = `
            <tr>
                <td class="cell-name">${name}</td>
                <td class="cell-country">${country}</td>
                <td>
                    <button class="btn-read">读取内容</button>
                    <button class="btn-delete">删除行</button>
                </td>
            </tr>
        `;
        
        // 将新行添加到表格tbody中
        $('#tblCustomers tbody').append(newRow);
        
        // 清空输入框，方便下一次添加
        $('#txtName').val('');
        $('#txtCountry').val('');
    });

    // 2. 读取单元格内容（用事件委托处理动态生成的按钮）
    $(document).on('click', '.btn-read', function() {
        // 快速定位当前按钮所在的行
        var currentRow = $(this).closest('tr');
        
        // 读取该行对应单元格的文本内容
        var rowName = currentRow.find('.cell-name').text();
        var rowCountry = currentRow.find('.cell-country').text();
        
        // 在展示区显示读取到的内容
        $('#contentDisplay').html(`
            <strong>读取到的行内容：</strong><br>
            姓名：${rowName}<br>
            国家：${rowCountry}
        `);
    });

    // 额外加个删除行的功能（可选，提升用户体验）
    $(document).on('click', '.btn-delete', function() {
        $(this).closest('tr').remove();
        $('#contentDisplay').html(''); // 清空内容展示区
    });
});

关键细节说明 #

• 事件委托：因为动态添加的行是页面加载后才生成的，直接绑定事件会失效，所以用$(document).on('click', '.btn-read', ...)这种事件委托方式，确保新按钮能正常触发事件。
• 单元格读取逻辑：用closest('tr')快速定位当前按钮所在的行，再通过find()匹配对应的单元格类，用text()获取纯文本内容（如果单元格里有HTML元素，换成html()即可）。
• 输入校验：添加行前先检查输入是否为空，避免生成无意义的空行。

如果需要支持点击单元格直接读取内容，可以再加这段代码：

// 点击单元格直接读取内容（排除最后一列操作栏）
$(document).on('click', '#tblCustomers tbody td:not(:last-child)', function() {
    var cellContent = $(this).text();
    var cellType = $(this).hasClass('cell-name') ? '姓名' : '国家';
    $('#contentDisplay').html(`<strong>读取到的单元格内容：</strong><br>${cellType}：${cellContent}`);
});

这样不管是点击“读取内容”按钮，还是直接点击单元格，都能轻松获取对应的内容啦！

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