Как обновить таблицу без добавления новой таблицы при каждом нажатии кнопки?

ProgramBox

Как обновить таблицу без добавления новой таблицы при каждом нажатии кнопки?

Post author:admin
Запись опубликована:28 марта, 2023
Post category:Вопросы по программированию

#javascript #php #jquery #ajax

Вопрос:

У меня есть 3 файла для отображения данных при нажатии кнопки. Как бы я не продолжал добавлять таблицу при каждом нажатии кнопки? Я хотел бы получать обновленные данные каждый раз, когда я нажимаю кнопку.

Я попытался удалить, если идентификатор кнопки и идентификатор данных равны, но это не сработало. Есть ли простой способ сделать?

PHP-скрипт на основе HTML.
JS для ajax для передачи идентификатора кнопки, получения данных из PHP-скрипта.
PHP получает данные из SQL, но я напишу данные для этого поста.

PHP на основе HTML

 <!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MINI TEST</title>
</head>

<style>
.oldList td{
    border: 1px solid gray;
    background: lightblue;
}
.oldList{
    width: 100px;
    margin: 50px;
}
.showNewData td{
    border: 1px solid gray;
    background: lightgreen;
}
.showNewData{
    width: 100px;
    margin: 50px;
}

</style>

<body>

<?php

$oldList[] = array('1' => '1', '2' => 'mango','3' => '340');
$oldList[] = array('1' => '2', '2' => 'peach', '3' => '480');

    foreach ($oldList as $value){ 
        $idForList = $value['1'];
        print "<table class='oldList'>";
        print "<tr><td>".$value['1']."</td><td>".$value['2']."</td><td>".$value['3']."</td></tr>";
        print "</table>";  

        print"<button class='newData' data-name='$idForList' id='$idForList'>{$idForList}NEW DATA</button>";  
        $idForNewData = "id" . strval($idForList);
        print "<table class='showNewData' id='$idForNewData'></table>";
    }
 
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="mini_test_ajax.js"></script>
</body>
</html>

 $(document).ready(function(){
  $('.newData').click(function(){
   
    var gotId =  $(this).data('name');
    var idForNewData =  "#id"   gotId; 

        $.ajax({
          url: "mini_test_sql.php",
          type: "POST",
          data: {
            "gotId": $(this).data("name")
          },
          success: function(data) {
              console.log("success");
              $.each(JSON.parse(data), function(key, value){
                $(idForNewData).append("<td>"   value   "<td>");
              });     

          },  
          error: function(xhr,XMLHttpRequest,errorThrown){
              console.log("Fail");
              console.log("xhr: "   xhr);
              console.log("XMLHttpRequest: "   XMLHttpRequest);
              console.log("errorThrown: "   errorThrown);   
          }
        });


  });
});

PHP

 <?php 

$idForList = $_POST['gotId']; 

$productList[] = array();

$productList[0] = array(
    'id'    => "1",
    'name'  => "mango 2 ",
    'price' => "280"
);

$productList[1] = array(
    'id'    => "2",
    'name'  => "peach 2",
    'price' => "300"
);

if($idForList == 1){
  echo json_encode($productList[0]);
}
if($idForList ==2){
  echo json_encode($productList[1]);  
}

?>

1. Вы продолжаете добавлять пустую таблицу. но вам тоже нужен trs success: function(data) { $(idForNewData).empty(); $.each(JSON.parse(data), function(key, value){ $(idForNewData).append("<tr><td>" value "<td></tr>"); }); },

2. Голосование за закрытие как не воспроизводимое или было вызвано опечаткой Хотя здесь могут быть похожие вопросы по теме, этот был решен таким образом, чтобы с меньшей вероятностью помочь будущим читателям.

3. mplungjan> Спасибо, решил эту проблему!

Ответ №1:

Легко, когда вы получаете данные, очистите таблицу, а затем снова поместите в нее свои данные в этой части кода:

 $.each(JSON.parse(data), function(key, value){
       $(idForNewData).append("<td>"   value   "<td>");
});

Должно быть что-то вроде этого:

 $(idForNewData).html("");
var d = "<tr>";
$.each(JSON.parse(data), function(key, value){
          d  = "<td>"   value   "<td>";
}); 
d  = "</tr>";
$(idForNewData).html( d );

1. Ultrazz008> Спасибо , я тоже добавил этот код, и это решило проблему . У меня не было идеи добавлять значение tr, td в переменную d, поэтому это также было полезно.

2. Этот вопрос является вопросом типа опечатки и не требует ответа. Это бесполезно для других пользователей — вместо ответа на то, что уже было прокомментировано по вопросу, вы могли бы проголосовать за закрытие вместо этого

Ответ №2:

Обратите внимание, что селектором идентификатора является ‘#’, а не ‘#id’.

Пожалуйста, попробуйте:

 var idForNewData =  "#"   gotId;

Как упоминалось в Ultrazz008, вы просто пытаетесь добавить ячейку (td) в таблицу. Однако таблица содержит строки (tr), и любая строка содержит ячейки (td).

Идентификаторы лучше начинать с букв (пожалуйста, проверьте здесь).