Question

感谢您的帮助！

情况如下：

有两个包含来自数据库的数据的表。表的数量实际上取决于发布它们的用户。我使用了“同时循环方法”在表格上发布了数据。

因此，现在我希望可以通过单击“更新”按钮来更改每个表中的数据。

每个表都有自己的ID。

我在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>

Answer 1

您的问题是由于元素不是#id的{{3}}的直接原因而引起的。因此，您必须以其他元素作为起点。然后，由于它们是后代（而不是子代），请使用可以children的其他函数。

$(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>

如何使用jQuery Ajax PHP和MySQL更新表中的数据

1 个答案: