如何获取表单元格中的type输入值?

时间:2019-05-13 21:27:46

标签: javascript jquery html-table

我有下表:

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

我想知道如何使用first valuesecond value提取JSJquery。以前,我的桌子是这样的:

<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()

但是没有运气,“第二价值”仍然以""的形式出现。有关如何解决此问题的任何想法?

2 个答案:

答案 0 :(得分:3)

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

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;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

答案 1 :(得分:1)

更改

"secondValue" :$(tr).find('td:eq(1)').val()

"secondValue" :$(tr).find('td input:eq(0)').val()