doujingya1166
2019-06-23 22:20
浏览 72

如何使用jquery ajax php和mysql更新表中的数据

I would appreciate your help!

The situation is as follows:

There are two tables with data from the database. The number of tables actually depends on the user who will post them. I used "while cycle method" to post the table with data on the page.

So, now I want the data in each of these tables could be changed by clicking the Update button.

Each table has it's own ID.

I found many solutions on Youtube with the usage of jquery ajax php and mysql.

I have tried this code below so far:

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

An here is I have a problem!!! Because the children method is not working for my TABLE structure! But I cannot find another solution.

 <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条回答 默认 最新

  • duanbanfei2875 2019-06-23 22:58
    已采纳

    Your problem is caused because the elements are not immediate children of #id. So you have to target a different element to start with. And then, since they are descendants (not children), use a different function that can find them.

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

    </div>
    
    打赏 评论

相关推荐 更多相似问题