我有下表:
<tbody id="TableBodyId">
<tr>
<td>First Value</td>
<td><input type="text" size="5" value="Second Value"></td>
</tr>
</tbody>
我想知道如何使用first value
或second value
提取JS
和Jquery
。以前,我的桌子是这样的:
<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()
但是没有运气,“第二价值”仍然以""
的形式出现。有关如何解决此问题的任何想法?
答案 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()