Как обновить данные в таблице, используя jquery ajax php и mysql - PullRequest
Новая
       2

Как обновить данные в таблице, используя jquery ajax php и mysql

0 голосов
/ 24 июня 2019

Буду признателен за вашу помощь!

Ситуация следующая:

Есть две таблицы с данными из базы данных.Количество таблиц на самом деле зависит от пользователя, который их опубликует.Я использовал «метод цикла цикла» для публикации таблицы с данными на странице.

Итак, теперь я хочу, чтобы данные в каждой из этих таблиц можно было изменить, нажав кнопку Обновить.

У каждой таблицы есть свой идентификатор.

Я нашел много решений на Youtube с использованием jquery ajax php и mysql.

Я пробовал этот код ниже: 

<html>

 <!-- My table structure which cannot be chanhed -->

 <?php       
     while ($row = mysqli_fetch_array($result_set)):;
 ?>

<table class="myTable" cellspacing="5"> 
   <tbody>
       <tr id="<?php echo $row['id'];?>">
        <th>Title</th>
        <td data-target="title" class="title"><b><?php echo 
     $row['title'];?></b></td>
            </tr>
    <tr>
        <th>Description</th>
        <td data-target="description"><p class="description" 
     align="justify"><?php echo $row['description'];?></p></td>
    </tr>   
    <tr>
        <th>Phone number</th>
        <td data-target="tel"><?php echo $row['tel'];?></td>
    </tr>
    <tr>
        <th>---</th>
        <td><a href="#" data-role="update" data-id="<?php echo 
       $row['id'];?>">Update</a></td>
    </tr>

    </tbody>        
    </table>
     <?php endwhile;?>



   <!-- Bootstrap Modal -->
   <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

     <!-- Modal content-->
     <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times; 
    </button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body" align="center">
    <div class="form-group">
        <label>Title</label>
        <textarea id="title" name = "title" rows = "1" cols = "60" 
     required></textarea>
    </div>
    <div class="form-group">
        <label>Description</label>
        <textarea id="description" name = "description" rows = "20" 
    cols = "60" required></textarea>
    </div>
    <div class="form-group">
        <label>Phone number (optional)</label>
        <input type="text" id="tel" name="tel"/>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#" id="save" class="btn btn-primary pull- 
  right">Update</a>
<button type="button" class="btn btn-default pull-left" data- 
   dismiss="modal">Close</button>
    </div>
    </div>

  </div>
 </div>

 </html>

А вот у меня проблема !!!Потому что метод children не работает для моей структуры TABLE!Но я не могу найти другое решение. 

 <script>
 $(document).ready(function(){
 $(document).on('click','a[data-role=update]',function(){
 var id = $(this).data('id');
 var title =  $('#'+id).children('td[data-target=title]').text();
 var description = $('#'+id).children('td[data- 
 target=description]').text();
 var tel = $('#'+id).children('td[data-target=tel]').text();


 $('#title').val(title);
 $('#description').val(description);
 $('#tel').val(tel);
 $('#myModal').modal('toggle');

 })
 });
 </script>

1 Ответ

0 голосов
/ 24 июня 2019

Ваша проблема вызвана тем, что элементы не являются непосредственными дочерними из #id. Таким образом, для начала вам нужно выбрать другой элемент. И затем, поскольку они являются потомками (а не детьми), используйте другую функцию, которая может найти их. 

$(document).ready(function() {
  $(document).on('click', 'a[data-role=update]', function() {
    var $body = $(this).closest('tbody');
    var title = $body.find('td[data-target=title]').text().trim();
    var description = $body.find('td[data-target=description]').text().trim();
    var tel = $body.find('td[data-target=tel]').text().trim();

    $('#title').val(title);
    $('#description').val(description);
    $('#tel').val(tel);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="myTable" cellspacing="5">
  <tbody>
    <tr id="1">
      <th>Title</th>
      <td data-target="title" class="title">
        <b>Title</b></td>
    </tr>
    <tr>
      <th>Description</th>
      <td data-target="description">
        <p class="description" align="justify">
          Description
        </p>
      </td>
    </tr>
    <tr>
      <th>Phone number</th>
      <td data-target="tel">
        Phone
      </td>
    </tr>
    <tr>
      <th>---</th>
      <td><a href="#" data-role="update" data-id="1">Update</a></td>
    </tr>

  </tbody>
</table>


<div class="form-group">
  <label>Title</label>
  <textarea id="title" name="title" rows="1" cols="60" required></textarea>
</div>
<div class="form-group">
  <label>Description</label>
  <textarea id="description" name="description" rows="20" cols="60" required></textarea>
</div>
<div class="form-group">
  <label>Phone number (optional)</label>
  <input type="text" id="tel" name="tel" />
</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...