如何获取表格单元格内类型输入的值？

Question

我有下表：

<tbody id="TableBodyId">
  <tr>
    <td>First Value</td>
    <td><input type="text" size="5" value="Second Value"></td>
  </tr>
</tbody>

我想知道如何使用or提取first value和。以前，我的桌子是这样的：second valueJSJquery

<tbody id="TableBodyId">
  <tr>
    <td>First Value</td>
    <td>Second Value</td>
  </tr>
</tbody>

为了获取这些值，我使用以下方法执行此操作jQuery：

var TableData = new Array();

$('#TableBodyId tr').each(function(row, tr)
{
    TableData[row] = {
        "firstValue" : $(tr).find('td:eq(0)').text(),
        "secondValue": $(tr).find('td:eq(1)').text()
    }
});

然后，我决定希望能够更改第二个单元格中的值，因此我将其设置为：

<input type="text" size="5" value="Second Value"/>

现在的问题是tableData第二个单元格是""（换句话说，空白）。为了解决这个问题，我尝试这样做：

"firstValue": $(tr).find('td:eq(0)').text(),
"secondValue": $(tr).find('td:eq(1)').val()

但运气不好，第二个值仍然显示为""。关于如何解决这个问题有什么想法吗？

Answer 1

您需要从元素中获取值<input>，如下所示：

TableData[row] = {
    "firstValue" : $(tr).find('td:eq(0)').text(),
    "secondValue": $(tr).find('td:eq(1) input').val()
}

例子：

TableData[row] = {
    "firstValue" : $(tr).find('td:eq(0)').text(),
    "secondValue": $(tr).find('td:eq(1) input').val()
}

$(document).ready(function()
{
    var TableData = [];

    $('#TableBodyId tr').each(function(row, tr)
    {
        TableData[row] = {
            "firstValue" : $(tr).find('td:eq(0)').text(),
            "secondValue": $(tr).find('td:eq(1) input').val()
        }
    });
    
    console.log(TableData);
});

.as-console {background-color:black !important; color:lime;}