javascript - 元素内容更改的问题 - 我如何获得新值?
问题描述
我想生成一个简单的表单,它显示数据库中的数据并让用户更新这些数据。
我通过 servlet 接收数据并以 JSON 文件的形式将其传递给前端。我生成一个表格并显示值。前两个值是整数,后两个是文本,所以我选择<input type='number \>
了第一个和<textarea><\textarea>
最后一个。
问题:当我通过输入新文本或数字更改内容并点击按钮时,生成的 JSON 仍显示旧值。我怎样才能得到新的?
var $tbl = $("#table1");
var index = 1
var item = ["id", "1", "2", "text1", "text2"]
$(
"<tr><th>Number</th><th>Number 2</th><th>Text</th><th>Text 2</th></tr>")
.appendTo($tbl)
$("<tr><td><input type='number' id='" +
index +
"_from' value='" +
item[1] +
"'/></td><td><input type='number' id='" +
index +
"_to' value='" +
item[2] +
"' /></td><td><textarea rows='1' cols='40' id='" +
index +
"_sub'>" +
item[3] +
"</textarea></td><td><textarea rows='6' cols='50' id='" +
index +
"_txt'>" +
item[4] +
"</textarea></td></tr>")
.appendTo($tbl);
$("body").append("<input type='button' id='btn_1' value='button'>");
$("#btn_1").click(htmltable2json)
function htmltable2json() {
var json = '{';
var myRows = [];
var headersText = [];
var $headers = $("#table1 th");
var $rows = $("#table1 tr").each(function(index) {
$cells = $(this).find("td");
myRows[index - 1] = {};
$cells.each(function(cellIndex) {
// Set the header text
if (headersText[cellIndex] === undefined) {
headersText[cellIndex] = $($headers[cellIndex]).text();
}
myRows[index - 1][headersText[cellIndex]] = $($(this).html()).val() ? $($(this).html()).val() : $(this).text();
});
});
alert(JSON.stringify(myRows));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1"></table>
解决方案
A better solution would be to get the input value rather than children text or value as follow:
var $tbl = $("#table1");
var index = 1
var item = ["id", "1", "2", "text1", "text2"]
$(
"<tr><th>Number</th><th>Number 2</th><th>Text</th><th>Text 2</th></tr>")
.appendTo($tbl)
$("<tr><td><input type='number' id='" +
index +
"_from' value='" +
item[1] +
"'/></td><td><input type='number' id='" +
index +
"_to' value='" +
item[2] +
"' /></td><td><textarea rows='1' cols='40' id='" +
index +
"_sub'>" +
item[3] +
"</textarea></td><td><textarea rows='6' cols='50' id='" +
index +
"_txt'>" +
item[4] +
"</textarea></td></tr>")
.appendTo($tbl);
$("body").append("<input type='button' id='btn_1' value='button'>");
$("#btn_1").click(htmltable2json)
function htmltable2json() {
var json = '{';
var myRows = [];
var headersText = [];
var $headers = $("#table1 th");
var $rows = $("#table1 tr").each(function(index) {
$cells = $(this).find("td");
myRows[index - 1] = {};
$cells.each(function(cellIndex) {
// Set the header text
if (headersText[cellIndex] === undefined) {
headersText[cellIndex] = $($headers[cellIndex]).text();
}
myRows[index - 1][headersText[cellIndex]] = $(':input', $(this)).val() ? $(':input', $(this)).val() : $(this).text();
});
});
alert(JSON.stringify(myRows));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1"></table>
推荐阅读
- python - 如何获得 dd MMM yyyy 格式?(大写月份名称)
- javascript - 尽管 xPath 识别了元素,但 puppteer click() 方法不起作用
- node.js - 我在 NEST.JS LAMBDA PROXY 应用程序上收到 CORS 错误
- solana - Solana what is a good zero value address or default address?
- python - Django:嵌套的for循环不能正常工作
- jquery - 在滚动时绘制 SVG 线条持续时间
- python - GCP 数据流批处理作业 - 防止工作人员在批处理作业中一次运行多个元素
- typescript - 如何在 Typescript 中包装具有多个重载的函数?
- html - 将 Google 幻灯片发布到网络(特定页面)
- python - Docker 套接字和 Python