javascript - 元素内容更改的问题 - 我怎样才能获得新值？

Question

我想生成一个简单的表单，它显示数据库中的数据并让用户更新此数据。

我通过 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>

Answer 1

问题在于如何从单元格输入中获取值。

您应该使用类似 $(this).children().first().val()

我建议您在输入中添加一个类，这样选择它们会更容易。

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).children().first().val() ? $(this).children().first().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>