使用jQuery无法获取动态生成表格的TD值问题求助

我来帮你搞定这个问题，先看看你代码里的两个核心问题：

1. 重复ID导致的选择器失效
   你在foreach循环里给每个<td>都设置了id="Quantity"，但HTML规则里ID必须是唯一的——浏览器只会识别第一个带这个ID的元素，所以你根本没法拿到当前点击行的Quantity值。

2. jQuery选择器写法错误
   原代码里$(Quantity)是语法错误，正确的ID选择器应该是$('#Quantity')，但就算改对了，因为ID重复的问题，这个方法依然行不通。

修复方案（两种方式可选） #

方式1：保留inline onclick，通过DOM关系查找

先修改表格代码，把重复的ID换成class，并给按钮传递当前元素：

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td class="quantity"> <!-- 把id改为class，避免重复 -->
                @Html.DisplayFor(modelItem => item.Quantity)
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-info btnupdate" onclick="Update(@item.Id, this);"> 
                    Update 
                </button>
            </td>
        </tr>
    }
</tbody>

然后修改Update函数，通过按钮元素定位到所在行的Quantity：

function Update(id, btnElement) {
    var itemId = id;
    // 找到按钮所在的行，再定位到该行的quantity单元格
    var quantity = $(btnElement).closest('tr').find('.quantity').text().trim();
    
    // 测试输出，确认值正确
    console.log('当前Item ID:', itemId);
    console.log('当前Quantity:', quantity);
    
    // 这里继续你的业务逻辑，比如发送更新请求等
}

方式2：使用事件委托（更推荐的jQuery最佳实践）

这种方式不需要inline onclick，代码更整洁易维护：
先修改表格代码，给按钮添加data属性存储ID：

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td class="quantity">
                @Html.DisplayFor(modelItem => item.Quantity)
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-info btnupdate" data-item-id="@item.Id"> 
                    Update 
                </button>
            </td>
        </tr>
    }
</tbody>

然后通过jQuery事件委托绑定点击事件：

$(document).ready(function() {
    // 给所有.btnupdate按钮绑定点击事件
    $('.btnupdate').click(function() {
        var itemId = $(this).data('item-id');
        var quantity = $(this).closest('tr').find('.quantity').text().trim();
        
        console.log('当前Item ID:', itemId);
        console.log('当前Quantity:', quantity);
        
        // 后续更新逻辑
    });
});

原理说明 #

• closest('tr')：找到当前按钮最近的父级<tr>元素，确保我们只操作点击行的内容
• find('.quantity')：在当前行内定位到存储Quantity的单元格
• text().trim()：获取单元格的文本内容并去除多余空格，避免格式问题

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