I have set of JSON objects that I would like to display in table format and I have few input fields. The value entered in form fields should be updated in Json object and should be displayed in the existing table. Following is the code. I am unable to update the JSON object in the table.
我有一组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>
2 个解决方案
#1
1
Use
e.preventDefault();
to prevent form-submit action.使用e.preventDefault();为了防止表单提交动作。
Do not
stringify
toserializeObject
otherwise it willpush
string inobj
array不要将字符串绑定到serializeObject,否则它将在obj数组中推字符串
Append
tr
in table onsubmit
action在表格上附加操作。
Try this:
试试这个:
$.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>
小提琴在这里
#2
0
just update your submit handler and also update name field "assigned" in your html
只需更新提交处理程序,并更新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");
});
#1
1
Use
e.preventDefault();
to prevent form-submit action.使用e.preventDefault();为了防止表单提交动作。
Do not
stringify
toserializeObject
otherwise it willpush
string inobj
array不要将字符串绑定到serializeObject,否则它将在obj数组中推字符串
Append
tr
in table onsubmit
action在表格上附加操作。
Try this:
试试这个:
$.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>
小提琴在这里
#2
0
just update your submit handler and also update name field "assigned" in your html
只需更新提交处理程序,并更新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");
});