Javascript 当使用jquery获取html（）属性时，无法获取更新的表值
我有一个从数据库加载的表。当用户更新表中的文本框时，我编写了一个jquery，它应该从HTML表中收集更新的值，并希望将它们更新回数据库。需要帮助修复jquery以从表单获取更新的值。当我填写表单并尝试运行Jquery时，下面编写的Jquery不会给我更新的html值 HTMLJavascript 当使用jquery获取html（）属性时，无法获取更新的表值,javascript,jquery,html,Javascript,Jquery,Html,我有一个从数据库加载的表。当用户更新表中的文本框时，我编写了一个jquery，它应该从HTML表中收集更新的值，并希望将它们更新回数据库。需要帮助修复jquery以从表单获取更新的值。当我填写表单并尝试运行Jquery时，下面编写的Jquery不会给我更新的html值 HTML <div class="panel-body"> <table id="myTable"
<div class="panel-body">
<table id="myTable" class="table table-striped table-hover table-sm" cellspacing="10" width="100%" style="font-size: 14px; height: auto">
<thead>
<tr style="text-align: right;">
<th>Key Type</th>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{% for result in results %}
<tr>
<td>{{result["Key Type"]}}</td>
<td>{{result["Key"]}}</td>
<td><input type="text" value={{result["Value"]}} style="text-align: center;"></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="col-md-4">
<input type="submit" id="Save" align="center" class="btn btn-primary" style="width:150px" value="SAVE">
<input type="reset" id="Reset" align="center" class="btn btn-primary" style="width:150px" value="CANCEL">
</div>
</div>
键类型
钥匙
价值
{结果中的结果为%}
{{result[“Key Type”]}
{{result[“Key”]}
{%endfor%}
<script type="text/javascript">
$(function () {
var dataArr = [];
$("td").each(function () {
dataArr.push($(this).html());
});
$('#Save').click(function () {
$.ajax({
type: "POST",
headers: { "Content-Type": "application/json" },
url: "/SaveFile",
data: JSON.stringify(dataArr),
success: function (response) {
console.log(response);
},
error: function (response, error) {
console.log(response);
console.log(error);
}
});
});
});
</script>
$（函数（）{
var dataArr=[]；
$（“td”）。每个（功能）{
dataArr.push（$（this.html（））；
});
$（“#保存”）。单击（函数（）{
$.ajax({
类型：“POST”，
标题：{“内容类型”：“应用程序/json”}，
url:“/SaveFile”，
数据：JSON.stringify（dataArr），
成功：功能（响应）{
控制台日志（响应）；
},
错误：函数（响应，错误）{
控制台日志（响应）；
console.log（错误）；
}
});
});
});
<script type="text/javascript">
$(function () {
$('#Save').click(function () {
var dataArr = [];
$("td").each(function () {
dataArr.push($(this).html());
});
$.ajax({
type: "POST",
headers: { "Content-Type": "application/json" },
url: "/SaveFile",
data: JSON.stringify(dataArr),
success: function (response) {
console.log(response);
},
error: function (response, error) {
console.log(response);
console.log(error);
}
});
});
});
</script>
$（函数（）{
$（“#保存”）。单击（函数（）{
var dataArr=[]；
$（“td”）。每个（功能）{
dataArr.push（$（this.html（））；
});
$.ajax({
类型：“POST”，
标题：{“内容类型”：“应用程序/json”}，
url:“/SaveFile”，
数据：JSON.stringify（dataArr），
成功：功能（响应）{
控制台日志（响应）；
},
错误：函数（响应，错误）{
控制台日志（响应）；
console.log（错误）；
}
});
});
});
<代码> > p>我会考虑一个对象数组和一个数组。如果您的表格采用此格式：
<div class="panel-body">
<table id="myTable" class="table table-striped table-hover table-sm" cellspacing="10" width="100%" style="font-size: 14px; height: auto">
<thead>
<tr style="text-align: right;">
<th>Key Type</th>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{% for result in results %}
<tr>
<td>{{result["Key Type"]}}</td>
<td>{{result["Key"]}}</td>
<td><input type="text" value={{result["Value"]}} style="text-align: center;"></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="col-md-4">
<input type="submit" id="Save" align="center" class="btn btn-primary" style="width:150px" value="SAVE">
<input type="reset" id="Reset" align="center" class="btn btn-primary" style="width:150px" value="CANCEL">
</div>
</div>
dataObj
数组将包含如下内容：
[
{
"Key Type": "Number",
"Key": "Product Code",
"Key Value": "1001"
},
{
"Key Type": "Number",
"Key": "Product Code",
"Key Value": "1002"
}
]
另外请注意，对于某些单元格，我们从该单元格和最后一个单元格中获取文本，我们必须从输入字段中获取值。如果这是您试图获取数组的唯一项，那么您可以简化代码
function getTableData(tbl){
var body = $("tbody", tbl);
var results = [];
$("tr", body).each(function(i, r){
results.push($("td:last input", r).val());
});
return results;
}
这将为您提供一个包含所有输入的数组。它的使用方式如下：
var dataArr = getTableData($("#myTable"));
您提供的代码似乎不会更新您的表，也不会获取更新的信息。我不清楚你的问题是什么。看起来，您标记为HTML的内容实际上不是HTML，而是通过其他程序处理为HTML。请向我们提供准确的信息，以便能够重现您的问题。如果您所说的是，您希望在单击“#Save”
时，dataArr
数组是每个
的当前内容，那么显然，它不会是。它将是创建dataArr
时的内容，因为您显示的代码中从未更新过dataArr
。如果您希望在单击'#Save'
时将其作为
内容，则需要在此时读取数据。这可以通过移动$（'#Save'）来实现。单击$（function（）{
行之后的（function（）{
行）以立即执行。仍然存在相同的问题。让我编辑所做的代码更改
function getTableData(tbl){
var body = $("tbody", tbl);
var results = [];
$("tr", body).each(function(i, r){
results.push($("td:last input", r).val());
});
return results;
}
var dataArr = getTableData($("#myTable"));