gpt4 book ai didi

javascript - 表被附加而不是创建一个新表

转载 作者:行者123 更新时间:2023-11-30 12:07:30 25 4
gpt4 key购买 nike

我正在写一个网页,其中有一个用数据库中的数据创建的表。在这里,我使用的是 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com