How to update the data in the table without adding new elements using append, but overwriting?

H

heilagr_weyland2018-02-12 16:36:32

JavaScript

heilagr_weyland, 2018-02-12 16:36:32

<!DOCTYPE HTML>

<html>
<head>
  <title>Spring Boot - DELETE-UPDATE AJAX Example</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>

<body>
<div class="container">
  <h1>JOPA</h1>
  <div class="row col-md-7 table-responsive">
    <table id="customerTable" class="table table-bordered table-hover">
      <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Price</th>
      </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>


</body>


<script>
    $(document).ready(function() {

        ajaxGet();

        // DO GET
        function ajaxGet(){
            var customerRow = '';

            $.ajax({
                type : "GET",
                url : window.location + "/wey/all",
                success: function(result){
                    $.each(result, function(i, quotation){

                         customerRow = '<tr>' +
                            '<td>' + quotation.id + '</td>' +
                            '<td>' + quotation.name.toUpperCase() + '</td>' +
                            '<td>' + quotation.price + '</td>' +
                            '</tr>';


                        $('#customerTable tbody').append(customerRow);



                    });

                    $( "#customerTable tbody tr:odd" ).addClass("info");
                    $( "#customerTable tbody tr:even" ).addClass("success");
                },
                error : function(e) {
                    alert("ERROR: ", e);
                    console.log("ERROR: ", e);
                }
            });
        }
        setInterval(ajaxGet,3000);

    })
</script>



</html>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Arman, 2018-02-12
@Arik

var customerRows = '';
$.each(result, function(i, quotation){
    customerRows += '<tr>' +
    '<td>' + quotation.id + '</td>' +
    '<td>' + quotation.name.toUpperCase() + '</td>' +
    '<td>' + quotation.price + '</td>' +
    '</tr>';
});

$('#customerTable tbody').html(customerRows);

S

string15, 2018-02-12
@string15

Try to clear the old content and then paste the new one?