Question

我有以下网页。它包含一个表。我最初使用选择框中的默认值构建表。我希望按钮上的click事件然后删除行并用ajax请求中的新内容替换它们。

html如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>



<script src = "ajax_ex.js"></script>
<script src = "ajax_ex2.js"></script>
</head>

<body>
<div class = "col-md-offset-1"><h1>AJAX EXAMPLE PAGE</h1></div> 

<div class ="row col-md-offset-1">
<select id = "state_select" style = "font-size: 15px">

  <option value="Texas">Texas</option>
  <option value="Alabama">Alabama</option>
</select>
<input type = "button" class = "btn"
name = "Change_State" value = "Change Table" id ='btn3'/>
</div>


<table class="table-striped col-md-10 col-md-offset-1" id = "state_table">
<tr id = "first_row">
<th>Category</th>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
<th>2014</th>
</tr>
</table>
</body>
</html>

构建表的第一个JQuery脚本如下：

$(function changestate() {

    var $first_row = $('#first_row')
    var state_filter = $('#state_select').val()

    $.ajax({
        type: 'GET',
        url: 'https://opendata.socrata.com/resource/a6x9-fw3a.json?state_name='+ state_filter,
        success: function(data) {
            $.each(data, function(i, item) {
                $first_row.after('<tr id = "table_row"><td>' + item.measure_category +'</td><td>' + item._2010 +'</td><td>' + item._2011 + '</td><td>' + item._2012 + '</td><td>' + item._2013 + '</td><td>' + item._2014 + '</td></tr>' );
            });
            console.log(data);
        }
    });
    //$('#btn3').click(changestate);
})

这是我想要运行的脚本，用于删除现有行并用新行替换它们。但所有发生的事情都是新的行被附加到表中并且它会增长。

$(function replace_table() {
    var $table_row = $('#table_row')
    var state_filter = $('#state_select').val()
    var $first_row = $('#first_row')

    $.ajax({
        type: 'GET',
        url: 'https://opendata.socrata.com/resource/a6x9-fw3a.json?state_name='+ state_filter,
        success: function(data) {
            $.each(data, function(i, item) {
                $table_row.remove();
                $first_row.after('<tr id = "table_row"><td>' + item.measure_category +'</td><td>' + item._2010 +'</td><td>' + item._2011 + '</td><td>' + item._2012 + '</td><td>' + item._2013 + '</td><td>' + item._2014 + '</td></tr>' );
            })
                console.log(data);
        }
    });
    $('#btn3').click(replace_table);

})

我需要删除然后替换。

Answer 1

使用jQuery中的.empty函数清除表中的所有内容。并在html中使用tbody来清除该部分并添加新部分。

jQuery(document).ready(function() {
    table_body = jQuery("#mytable tbody");

  jQuery('button').click(function() {
    //Clear entire table body, leave header as is
    table_body.empty();

    table_body.append('<tr>');
    table_body.append('<td>Appended row</td>');
    table_body.append('<td>Appended row</td>');
    table_body.append('<td>Appended row</td>');
    table_body.append('</tr>');
  });
});

完整示例： https://jsfiddle.net/3tabquw3/

Answer 2

正如用户之一在评论中指出的那样，你应该使用类名作为选择器来删除表中的行而不是id。

使用$('.table_row').remove();代替$('#table_row').remove();

并将此行放在

之前

$.each(data, function(i, item) {

这样的声明

$('.table_row').remove();
$.each(data, function(i, item) {

所以没有更改和正常工作的代码

$(function changestate() {

    var $first_row = $('#first_row')
    var state_filter = $('#state_select').val()

    $.ajax({
        type: 'GET',
        url: 'https://opendata.socrata.com/resource/a6x9-fw3a.json?state_name=' + state_filter,
        success: function(data) {
         $.each(data, function(i, item){
              $first_row.after('<tr class = "table_row"><td>' + item.measure_category + '</td><td>' + item._2010 + '</td><td>' + item._2011 + '</td><td>' + item._2012 + '</td><td>' + item._2013 + '</td><td>' + item._2014 + '</td></tr>');
         });
         console.log('default data = '+JSON.stringify(data));
       };
    });
    //$('#btn3').click(changestate);
});

function replace_table() {
  //var $table_row = $('.table_row')
  var state_filter = $('#state_select').val()
  var $first_row = $('#first_row')

  $.ajax({
    type: 'GET',
    url: 'https://opendata.socrata.com/resource/a6x9-fw3a.json?state_name=' + state_filter,
    success: function(data) {
      $('.table_row').remove();
      $.each(data, function(i, item) {
        $first_row.after('<tr class = "table_row"><td>' + item.measure_category + '</td><td>' + item._2010 + '</td><td>' + item._2011 + '</td><td>' + item._2012 + '</td><td>' + item._2013 + '</td><td>' + item._2014 + '</td></tr>');
      });
      console.log('ajax data = '+JSON.stringify(data));
    }
  });

}

$('#btn3').click(replace_table);

以下是fiddle

无法使用JQuery删除然后替换表中的行

2 个答案: