使用jQuery获取Django+HTML5项目可编辑Bootstrap Table编辑后数据失败

核心错误原因 #

• val()方法仅适用于<input>、<select>、<textarea>等表单控件，<td>属于普通DOM元素，读取内容需要调用text()而非val()。
• 你仅在表头的<th>标签上添加了name="pub_date"属性，表格主体的<td>没有该属性，选择器$('td[name="pub_date"]')匹配不到任何元素，所以返回undefined。
• Bootstrap Table默认不会自动同步DOM修改的内容到内部数据缓存，直接调用API获取的还是初始加载的旧数据。

可落地解决方法 #

方案1：直接操作选中行DOM取值（适合临时取值场景） #

check.bs.table回调自带当前选中行的DOM对象，直接定位对应列取值即可：

$('#bk-table').on('check.bs.table', function (e, row, $element) {
    // pub_date列是第6列，索引从0开始为5，取文本内容去除首尾空格
    const pubDate = $element.find('td:eq(5)').text().trim();
    alert(pubDate);
});

方案2：同步编辑内容到表格缓存（推荐，适合后续批量提交场景） #

先监听编辑事件同步更新Bootstrap Table内部缓存，后续直接从行对象取值即可：

1. 首先优化可编辑配置，避免表头被误改：
   移除<table>标签上的contenteditable='true'属性，添加如下CSS，仅允许表格主体单元格编辑：

#bk-table tbody td {
    contenteditable: true;
}

2. 添加编辑同步逻辑和取值逻辑：

// 监听单元格编辑结束事件，同步更新表格缓存
$('#bk-table').on('blur', 'tbody td', function () {
    const $td = $(this);
    const rowIdx = $td.parent().data('index');
    const colIdx = $td.index();
    // 获取当前列绑定的field字段名
    const field = $('#bk-table').bootstrapTable('getOptions').columns[0][colIdx].field;
    // 更新缓存数据
    $('#bk-table').bootstrapTable('updateCell', {
        index: rowIdx,
        field: field,
        value: $td.text().trim()
    });
});

// 选中行时直接从row对象取最新值即可
$('#bk-table').on('check.bs.table', function (e, row) {
    alert(row['book.pub_date']);
});

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