我正在写一个网页，其中有一个用数据库中的数据创建的表。在这里，我使用的是 Ajax。
下面是我的代码。 index.jsp
<html>
<head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<marquee>
<h1>This is an example of ajax</h1>
</marquee>
<p>
Date: <input type="text" id="startDatePicker">
</p>
<p>
Date: <input type="text" id="endDatePicker">
</p>
<form name="vinform">
Enter id:<input type="button" id="vutton" value="Click Me">
</form>
<span id="tableDiv"> <span id="err">Select Correct Dates</span>
</span>
<script type="text/javascript" src="table.js"></script>
</body>
</html>
table.js
var startDate = $("#startDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
var endDate = $("#endDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
$('#vutton').click(function() {
$.getJSON('ControllerServlet', {
'startDate' : startDate.val(),
'endDate' : endDate.val()
}, function(searchList) {
var $table = $('<table>').appendTo($('#tabDiv'));
$.each(searchList, function(index, result) {
$('#err').hide();
$('<tr>').appendTo($table).append(
$('<td>').text(result.caseNumber)).append(
$('<td>').text(result.caseOwner)).append(
$('<td>').text(result.status)).append(
$('<td>').text(result.issue)).append(
$('<td>').text(result.reason)).append(
$('<td>').text(result.age));
});
});
});
在这里，每次我单击按钮时，表格数据都会被附加，而不是仅显示当前结果。我认为这是由于我的 javascript 中的 append 造成的，在这里我想知道如何根据参数在每次单击按钮时仅显示表格，我想要显示的新表格，而不是附加到现有表格。
请告诉我该怎么做。
谢谢
最佳答案
也许您需要在添加新表之前删除所有内容:
var startDate = $("#startDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
var endDate = $("#endDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
$('#vutton').click(function() {
$.getJSON('ControllerServlet', {
'startDate' : startDate.val(),
'endDate' : endDate.val()
}, function(searchList) {
$('#tabDiv').html(""); //here's the trick
var $table = $('<table>').appendTo($('#tabDiv'));
$.each(searchList, function(index, result) {
$('#err').hide();
$('<tr>').appendTo($table).append(
$('<td>').text(result.caseNumber)).append(
$('<td>').text(result.caseOwner)).append(
$('<td>').text(result.status)).append(
$('<td>').text(result.issue)).append(
$('<td>').text(result.reason)).append(
$('<td>').text(result.age));
});
});
});
但是根据这些信息，我无法为您提供更多帮助。
关于javascript - 表被附加而不是创建一个新表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34768864/