使用jquery添加、删除数据并显示结果而不刷新

大家好

我在如何通过单击来自两个表的查询的链接来添加或删除数据库中的数据方面遇到了问题

这是我的查询视图。不管怎样，我使用左连接进行查询

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th style="width:3%;">#</th> 
      <th style="width:5%;">Code</th> <!-- from table 1 -->
      <th style="width:30%;">Name</th> <!-- from table 1 -->
      <th style="width:8%;">Price</th> <!-- from table 2 -->
      <th style="width:8%;">Paid</th> <!-- from table 2 -->
      <th style="width:15%;">Date Added</th> <!-- from table 2 -->
      <th style="width:10%"></th> <!-- show (+)add if t1.code != t2.code else show (x)remove -->
    </tr>
  </thead>
  <tbody>
  <?php
  $i=0;
  foreach ($members->result() as $d) {
    $i++;
  ?>
    <tr>
      <td><?php echo $i; ?></td>
      <td><?php echo $d->indicode; ?></td>
      <td><?php echo $d->title.'. '.$d->lastname.', '.$d->firstname ; ?></td>
      <td><?php 
      if($d->amount==''){}else{echo $d->amount;}
      ?></td>
      <td><?php echo $d->paid; ?></td>
      <td><?php echo $d->date_active; ?></td>
      <td><?php if($d->paid=='unpaid'){?><a href="<?php echo base_url().'participation/remove_byadmin/'.$d->indicode; ?>" class="text-danger"><i class="fa fa-times"></i> Remove</a><?php } 
      if($d->date_active==''){?>
        <a href="<?php echo base_url().'participation/add_byadmin/'.$d->indicode; ?>" class="text-primary"><i class="fa fa-plus"></i> Add</a>
      <?php }
      ?></td>
    </tr>
  <?php
    if($d->paid == 'unpaid'){
      $sum += $d->amount;
    }
  }
  ?>
  </tbody>
</table>

如果您注意到在最后一列中，我有一个特定的链接，如果表1中的代码与表2中的代码相同，它们在其中的位置将显示xremove，否则它将显示+add

我希望发生的是，当我单击添加按钮时，表1中的一些数据+要在控制器中定义的其他数据将添加到表2中，如果我单击删除按钮或链接，数据将从表2中删除。单击这些按钮后，我需要页面自动显示数据/结果，而不刷新页面

---

我希望有人能帮我摆脱这场混乱。提前谢谢你。

我认为你应该阅读以下内容：

1使用ajax发布和加载数据

2更改HTML节点的内容。删除HTML节点并添加新的HTML节点

例如：

如果对上述代码使用两个类似的按钮：

<button onclick="removeData(<?php echo indicode;?>)">Remove </button> <button onclick="addNew(<?php echo indicode;?>)"> Add </button > 您需要像这样标识您的表、tbody和tr：

<table id="yourTable"> <tbody id="yourTbody"> <tr id="indicode"> </tr> </tbody> </table> 当您使用ajax或post将数据发布到服务器时

function removeData(id) { $.post("participation/remove_byadmin/"+id,{},function(data){ //Here you can remove the tr corresponding indicode. //Or if your data is a fresh new table, you can change content of the table //by using data ($("#yourtable").html(data); - Just an example). } } function addNew(id) { $.post("participation/add_byadmin/"+id,{},function(data){ //You have to find out what should do here } } 在服务器上，您可以编写如下代码：

//This is just an example. You can read and understand. class Participation extends CI_Controller { function remove_byadmin(id) { $this->yourModel->deletebyID(id); echo $this->yourModel->getNewHTMLTable(); //Or echo something that will return to browser and you can use it to modify your table } function add_byadmin(id) { //do something echo $this->yourModel->getNewHTMLTable(); //Or echo something that will return to browser and you can use it to modify your table } } 对不起，我的英语不好

---

如果呈现的是HTML而不是HTML和PHP代码的混合，则更容易注意到链接。如果您想在单击后执行此操作，请添加自定义的单击事件处理程序，通过其中的$.ajax发送数据，并防止出现默认行为。谢谢。我怎么可能那样做呢？对不起，我是这方面的新手。实际上我想展示我的输出图像，但声誉不够。图像中没有必要。有必要在呈现HTML源代码。关于如何做到这一点看一看。有一个小例子说明了该怎么做。这个网站不是关于为我写代码，所以如果你理解小提琴的想法，你将能够使你需要的。