[英]updating a table using jquery
There is something im not seeing in this script I wrote, i want to update/redraw a table inside a DIV. 我写的这个脚本中没有即时消息,我想更新/重绘DIV中的表。 I wrote this: 我这样写:
<div id="e-table">
...
</div>
<script>
var tableHeader = '<table class=\"table table-striped\"><thead><tr><th>Date</th><th>Type</th><th>Information</th></tr></thead><tbody>';
var tableFooter = '</tbody></table>';
var table = $("#e-table");
function updateEvents() {
$.ajax({
url: "/monitor/ajaxEvents",
dataType: "json"
}).done(function(data) {
refreshTable(data);
});
}
function refreshTable(data) {
table.html(tableHeader);
$.each(data, function(i, item) {
table.append("<tr><td>" + item.date + "</td><td>" + item.type + "</td><td>" + "FOO" + "</td></tr>");
});
table.append(tableFooter);
}
updateEvents();
</script>
I save the table part that is constant to tableHeader and tableFooter, the in a cycle I append the TD elements, but this is script is outputting something strange: 我将常量表部分保存到tableHeader和tableFooter中,在一个循环中我追加了TD元素,但这是脚本输出的奇怪内容:
<div id="e-table">
<table class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Type</th>
<th>Information</th>
</tr>
</thead>
<tbody></tbody>
</table>
<tr>
<td>2014-07-03 12:12:00</td>
<td>withdrawal</td>
<td>FOO</td>
</tr>
<tr>
<td>2014-07-03 12:12:00</td>
<td>general</td>
<td>FOO</td>
</tr>
<tr>
<td>2014-07-03 12:11:58</td>
<td>withdrawal</td>
<td>FOO</td>
</tr>
<tr>
<td>2014-07-03 12:11:58</td>
<td>general</td>
<td>FOO</td>
</tr>
<tr>
<td>2014-07-03 11:33:43</td>
<td>withdrawal</td>
<td>FOO</td>
</tr>
<tr>
<td>2014-07-03 11:33:43</td>
<td>general</td>
<td>FOO</td>
</tr>
<tr>
<td>2014-07-03 11:33:42</td>
<td>withdrawal</td>
<td>FOO</td>
</tr>
<tr>
<td>2014-07-03 11:33:42</td>
<td>general</td>
<td>FOO</td>
</tr>
</div>
I dont get it, why is the tableFooter getting printed before the elements??? 我不明白,为什么tableFooter在元素之前被打印?
.append()
won't work like normal string concatenation, .append()
不能像普通的字符串连接那样工作,
Do like this, 这样吧
function refreshTable(data) {
$.each(data, function(i, item) {
tableHeader += "<tr><td>" + item.date + "</td><td>" + item.type + "</td><td>" + "FOO" + "</td></tr>"
});
tableHeader += tableFooter
table.html(tableHeader);
}
You're using jQuery to assign the 'Div' element with the id = 'e-table' to a variable named, 'table'. 您正在使用jQuery将id ='e-table'的'Div'元素分配给名为'table'的变量。 Thus, you are appending to the 'Div' element. 因此,您将附加到“ Div”元素。 Here's what you need to do, if you're going to use jQuery... 如果您要使用jQuery,这就是您需要做的...
**side note: Your 'refreshTable' method is not actually clearing out the contents when you do it the correct way like this. **旁注:当您以这种正确方式进行操作时,您的'refreshTable'方法实际上并未清除内容。 You'll have to clear all the child elements if you truly wish to empty the table before repopulating. 如果您确实希望在重新填充之前清空表,则必须清除所有子元素。
var table = $('<table></table');
var tableHeader = $('<th></th>')
.append($('<tr></tr>')
.append($('<th></th>').html('Date'))
.append($('<th></th>').html('Information')));
var tableBody = $('<tbody></tbody>');
function updateEvents() {
$.ajax({
url: "/monitor/ajaxEvents",
dataType: "json"
}).done(function(data) {
refreshTable(data);
});
}
function refreshTable(data) {
table.append(tableBody);
table.append(tableHeader);
$.each(data, function(i, item) {
tableBody.append("<tr><td>" + item.date + "</td><td>" + item.type + "</td><td>" + "FOO" + "</td></tr>");
});
}
updateEvents();
Where you declare 您在哪里申报
var table = $("#e-table");
you're actually getting a reference to the object, so when you .append to it, you're appending to that element, not to it's child. 实际上,您实际上是在获取对该对象的引用,因此,在附加到该对象时,您将附加到该元素,而不是其子元素。
There's a few ways around this, one would be to give the tbody an id of its own, eg 有几种解决方法,一种是给tbody一个自己的ID,例如
var tableHeader = '<table class=\"table table-striped\"><thead><tr><th>Date</th><th>Type</th><th>Information</th></tr></thead><tbody id=\"tableBody\">';
var tableFooter = '</tbody></table>';
and then get that object reference instead 然后获取该对象引用
var table = $("#tableBody");
(some tidy up probably an idea here too, but hopefully you get the essential idea) (这里也可以整理一些主意,但希望您能掌握必要的主意)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.