如何获取HTML表格td单元格内input输入框的字段值

问题原因 #

原有代码中使用actualData[1].innerText获取第二列内容，但该单元格内仅包含input输入框，不存在直接暴露的文本内容，因此无法拿到输入框的修改后的值。

修复方法 #

直接定位到单元格内的input元素，读取其value属性即可，有两种实现方式可选：

jQuery实现（推荐，项目已引入jQuery） #

将原有赋值语句替换为：

rowDataObject.birthday = $(actualData[1]).find('.datepicker').val()

原生JS实现 #

rowDataObject.birthday = actualData[1].querySelector('.datepicker').value

该场景最佳实践 #

• 优先使用类名/自定义属性定位元素，避免依赖列索引：后续如果调整表格列顺序，按索引取值的逻辑会直接失效，通过datepicker类名定位输入框兼容性更强。
• 循环表格行时限定范围：将$("table tr")修改为$("table tbody tr")，避免后续新增表头<thead>后，表头行也被遍历进结果数组。
• 如需校验日期合法性：可直接调用jQuery UI Datepicker的内置方法取值，避免用户手动输入不合法格式：

const $dateInput = $(actualData[1]).find('.datepicker')
const date = $dateInput.datepicker('getDate')
// date为null说明输入日期不合法，可自行加错误提示逻辑
rowDataObject.birthday = date ? $dateInput.val() : ''

• 生成表格行时注意变量声明：原有tableDateRow未加变量声明关键字，会泄漏为全局变量，修改为let tableDateRow = ...更规范。

修改后完整的按钮点击逻辑 #

button.addEventListener("click", function () {
    const temp = []
    $("table tbody tr").each(function () {
        var rowDataObject = {}
        var actualData = $(this).find('td')
        if (actualData.length > 0) {
            rowDataObject.name = actualData[0].innerText
            rowDataObject.birthday = $(actualData[1]).find('.datepicker').val()
            temp.push(rowDataObject)
        }
    })
    console.log(temp)
})

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