时间戳

首页 > 解决方案 > 使用jquery获取html()属性时无法获取更新后的表值

javascript - 使用jquery获取html()属性时无法获取更新后的表值

问题描述

我有一个从数据库加载的表。当用户更新表中的文本框时，我编写了一个 jquery，它应该从 HTML 表中收集更新的值，并希望将它们更新回数据库。需要帮助修复 jquery 以从表单中获取更新的值。当我填写表格并尝试运行 Jquery 时，下面写的 Jquery 不会给我更新的 html 值。

HTML

                            <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>

jQuery

    <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>

所做的更改

    <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>

标签： javascriptjqueryhtml

解决方案

我会考虑一个对象数组与单个数组。如果您的表格是这种格式：

<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>

然后一个数组将只包含一个巨大的难以读取的数据列表。

考虑以下。

function getTableData(tbl){
  var head = $("thead", tbl);
  var body = $("tbody", tbl);
  var results = [];
  var keys = [];
  var row;
  $("th", head).each(function(i, el){
    keys.push($(el).text().trim());
  });
  $("tr", body).each(function(ri, r){
    row = {};
    $.each(keys, function(i, k){
      if(i < 2){
        row[k] = $("td", r).eq(i).text().trim();
      } else {
        row[k] = $("td", r).eq(i).find("input").val();
      }
    });
    results.push(row);
  });
  return results;
}

这将为您提供更结构化的数据集。例如，像这样使用它：

var dataObj = getTableData($("#myTable"));

该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"));

推荐阅读