Question

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

这里每次点击按钮都会附加表数据而不是仅显示当前结果。我认为这是由于我append中的javascript，我想知道如何才能显示表格，每次点击按钮都会根据参数，我希望显示一个新表格而不是附加到现有的。

请告诉我该怎么做。

由于

Answer 1

在添加新表之前，您可能需要删除所有内容：

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));
         });
    });
});

但有了这些信息，我无法帮到你。

Answer 2

如果您不希望删除错误范围

，这可能会有所帮助

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));
         });
    });
});

表格将被附加而不是创建新表格

2 个答案: