正在附加表，而不是创建新表

Table is getting appended instead of creating a new one

本文关键字：创建 新表      更新时间：2023-09-26

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

但有了这些信息，我帮不了你更多。

如果您不想删除错误跨度，这可能会有所帮助

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 > table').remove(); // 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));
         });
    });
});
相关文章：