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>