jQuery 创建 table，但当前在单击提交按钮时会重复上一个 table

Question

我的 jQuery 创建了 tables，但目前它会在单击 'submit' 按钮时在之前的 tables 下重复新的 tables。我如何切换它以便在显示新的 table 之前清除之前的 table?

如有帮助将不胜感激！

    <script type="text/javascript">


    function call_everybody(){
        display_results_table();
        display_cyclist_results_table();
        display_cyclist2_results_table();
    }

    function display_results_table() {
        $("medal_table").empty();
        $('<table id = "results_table">').appendTo('#medal_table');
        $.get("sam2.php", { Country_1: $('#Country_1').val(), Country_2: $('#Country_2').val(), queryType: $('#differentOptions').val() }, 

    function (results_obtained) {

        $('<tr><td>Rank</td>' +
        '<td>Country Name</td>' +
        '<td>Population</td>' +
        '<td>GDP</td>' +
        '<td>Gold</td>' +
        '<td>Silver</td>' +
        '<td>Bronze</td>' +
        '<td>Total</td></tr>').appendTo('#results_table');

        for (var i = 0; i <= results_obtained.length; i++) {
            $('<tr><td>' + (i+1) + '</td>' + 
            '<td>' + results_obtained[i].country_name + '</td>' +
            '<td>' + results_obtained[i].population + '</td>' +
            '<td>' + results_obtained[i].gdp + '</td>' +
            '<td>' + results_obtained[i].gold + '</td>' +
            '<td>' + results_obtained[i].silver + '</td>' +
            '<td>' + results_obtained[i].bronze + '</td>' +
            '<td>' + results_obtained[i].total + '</td></tr>').appendTo('#results_table');              
        }   
    },'json');

    $('</table>').appendTo('#medal_table');
    }

    function display_cyclist_results_table() {
        $("cyclist_table").empty();
        $('<table id = "cyclist_results_table">').appendTo('#cyclist_table');
        $.get("sam3.php", { Country_1: $('#Country_1').val(), Country_2: $('#Country_2').val(), queryType: $('#differentOptions').val() }, 

    function (cyclist_results_obtained) {

        $('<tr><td>Country id</td>' +
        '<td>Name</td>' +
        '<td>Gender</td>' +
        '<td>Sport</td></tr>').appendTo('#cyclist_results_table');

        for (var j = 0; j <= cyclist_results_obtained.length; j++) {
            $('<tr><td>' + cyclist_results_obtained[j].iso_id + '</td>' +
            '<td>' + cyclist_results_obtained[j].name + '</td>' +
            '<td>' + cyclist_results_obtained[j].gender + '</td>' +
            '<td>' + cyclist_results_obtained[j].sport + '</td></tr>').appendTo('#cyclist_results_table');
        }

    },'json');

    $('</table>').appendTo('#cyclist_table');
    }

    function display_cyclist2_results_table() {
        $("cyclist2_table").empty();
        $('<table id = "cyclist2_results_table">').appendTo('#cyclist2_table');
        $.get("sam4.php", { Country_1: $('#Country_1').val(), Country_2: $('#Country_2').val(), queryType: $('#differentOptions').val() }, 

    function (cyclist2_results_obtained) {

        $('<tr><td>Country id</td>' +
        '<td>Name</td>' +
        '<td>Gender</td>' +
        '<td>Sport</td></tr>').appendTo('#cyclist2_results_table');

        for (var j = 0; j <= cyclist2_results_obtained.length; j++) {
            $('<tr><td>' + cyclist2_results_obtained[j].iso_id + '</td>' +
            '<td>' + cyclist2_results_obtained[j].name + '</td>' +
            '<td>' + cyclist2_results_obtained[j].gender + '</td>' +
            '<td>' + cyclist2_results_obtained[j].sport + '</td></tr>').appendTo('#cyclist2_results_table');
        }

    },'json');

    $('</table>').appendTo('#cyclist2_table');
    }

    </script>

    <title>sam.php</title>

</head>
<body>
    <form name="form">
        <table>
            <tr><td><input name="Country_1" id="Country_1" value="GBR" type="text"></td></tr>
            <tr><td><input name="Country_2" id="Country_2" value="USA" type="text"></td></tr>
            <td><input id='toggle' type="button" value="Cyclist Comparison" onclick="call_everybody()"/></td></tr>
        </table>
    </form>
    <div id = "toggle_table">
        <div id="medal_table"></div>
        <div id="cyclist_table"></div>
        <div id="cyclist2_table"></div>
    </div>
</body>

Answer 1

您需要添加-

$('#results_table').remove();

之前 -

$('<table id = "results_table">').appendTo('#medal_table');

jQuery 创建 table，但当前在单击提交按钮时会重复上一个 table

jQuery creating tables, but currently keeps repeating the table under the previous one when submit button is clicked

javascript

php

jquery

toggle