如何使用 javascript 或 jquery 以表格式显示 JSON 对象

How to display JSON object in table format using javascript or jquery?

本文关键字：格式显示 JSON 对象表格何使用 javascript jquery 更新时间：2023-09-26

我有一组 JSON 对象，我想以表格格式显示，但我的输入字段很少。在表单字段中输入的值应在 Json 对象中更新，并应显示在现有表中。以下是代码。我无法更新表中的 JSON 对象。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
        </script>
        </head>
    <body>
        <div id="wrap">
        <header>
            <h1>Task Tracker</h1>
            <h4>v2.0</h4>
        </header>
        <div id="main">
            <div id="left-side">
                <h3>Create a Task</h3>
                <form action="" method="post">
                    <div id="taskname" class="task-details">
                    <label>Name</label><br><input name="name" type="text">
                </div>
                <div id="taskdate" class="task-details">
                    <label>Date</label><br><input name="date" type="text">
                </div>
                <div id="assigned" class="task-details">
                    <label>Assigned To</label><br><input name="assigne" type="text">
                </div>
                    <input type="submit" value="Submit">
                </form>
            </div>
            <div id="right-side">
                <h3>Existing Tasks</h3>
                <div id="div1"> 
                </div>
            </div>
        </div>
    </div>
        <script>
$.fn.serializeObject = function()
        {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
            };
            $(function() {
                $('form').submit(function() {
                var data= console.log(JSON.stringify($('form').serializeObject()));
                return false;
                obj.push("data");
            });
                var obj=[
    {"name": "Task Name", "date": "12/01/2012", "assigned": "John Doe" },
    {"name": "Task Name", "date": "12/02/2012", "assigned": "John Doe" },
    {"name": "Task Name", "date": "12/03/2012", "assigned": "John Doe" },
    {"name": "Task Name", "date": "12/04/2012", "assigned": "John Doe" },
    {"name": "Task Name", "date": "12/05/2012", "assigned": "John Doe" },
    {"name": "Task Name", "date": "12/06/2012", "assigned": "John Doe" },
    {"name": "Task Name", "date": "12/07/2012", "assigned": "John Doe" }
]

var tbl=$("<table/>").attr("id","mytable");
$("#div1").append(tbl);
for(var i=0;i<obj.length;i++)
{
    var tr="<tr>";
    var td1="<td>"+obj[i]["name"]+"</td>";
    var td2="<td>"+obj[i]["date"]+"</td>";
    var td3="<td>"+obj[i]["assigned"]+"</td></tr>";
   $("#mytable").append(tr+td1+td2+td3); 
}
            });

        </script>
    </body>
</html>

使用e.preventDefault();阻止表单提交操作。

不要stringify serializeObject否则它将push数组obj字符串

在表中追加tr submit操作

试试这个：

$.fn.serializeObject = function() {
  var o = {};
  var a = this.serializeArray();
  $.each(a, function() {
    if (o[this.name] !== undefined) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
};
$(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    var data = $('form').serializeObject();
    var tr = "<tr>";
    tr += "<td>" + data["name"] + "</td>";
    tr += "<td>" + data["date"] + "</td>";
    tr += "<td>" + data["assigned"] + "</td></tr>";
    $("#mytable").append(tr);
    obj.push(data);
    this.reset();
  });
  var obj = [{
    "name": "Task Name",
    "date": "12/01/2012",
    "assigned": "John Doe"
  }, {
    "name": "Task Name",
    "date": "12/02/2012",
    "assigned": "John Doe"
  }, {
    "name": "Task Name",
    "date": "12/03/2012",
    "assigned": "John Doe"
  }, {
    "name": "Task Name",
    "date": "12/04/2012",
    "assigned": "John Doe"
  }, {
    "name": "Task Name",
    "date": "12/05/2012",
    "assigned": "John Doe"
  }, {
    "name": "Task Name",
    "date": "12/06/2012",
    "assigned": "John Doe"
  }, {
    "name": "Task Name",
    "date": "12/07/2012",
    "assigned": "John Doe"
  }];
  var tbl = $("<table/>").attr("id", "mytable");
  $("#div1").append(tbl);
  var html = '';
  for (var i = 0; i < obj.length; i++) {
    html += "<tr>";
    html += "<td>" + obj[i]["name"] + "</td>";
    html += "<td>" + obj[i]["date"] + "</td>";
    html += "<td>" + obj[i]["assigned"] + "</td></tr>";
  }
  $("#mytable").append(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
  <header>
    <h1>Task Tracker</h1>
    <h4>v2.0</h4>
  </header>
  <div id="main">
    <div id="left-side">
      <h3>Create a Task</h3>
      <form action="" method="post">
        <div id="taskname" class="task-details">
          <label>Name</label>
          <br>
          <input name="name" type="text">
        </div>
        <div id="taskdate" class="task-details">
          <label>Date</label>
          <br>
          <input name="date" type="date" type="text">
        </div>
        <div id="assigned" class="task-details">
          <label>Assigned To</label>
          <br>
          <input name="assigned" type="text">
        </div>
        <input type="submit" value="Submit">
      </form>
    </div>
    <div id="right-side">
      <h3>Existing Tasks</h3>
      <div id="div1">
      </div>
    </div>
  </div>
</div>

在这里摆弄

只需更新您的提交处理程序，并更新 html 中的名称字段"已分配">

$('form').submit(function(e) {
    e.preventDefault();
    var data= $('form').serializeObject();
    $("#mytable").append("<tr><td>"+data["name"]+"</td><td>"+data["date"]+"</td><td>"+data["assigned"]+"</td></tr>");
    obj.push("data");
});