使用MySQL，jQuery和Ajax添加或删除表行

Question

我有一个脚本，用MySQL和jQuery从表中删除行。 现在我也需要插入行。 我该如何修改代码？

的index.php

if (mysql_num_rows($result2) > 0) {
    echo "<table>";
    while ($searchIds = mysql_fetch_array($result2)) {
        echo "<tr class='show'>
                  <td>".$searchIds["channel_name"]."</td>
                  <td>".$searchIds["customer_id"]."</td>
                  <td>
                      <a class='delete' href='#' id='".$searchIds['id']."' channel_id='".$searchIds["channel_name"]." ".$searchIds["customer_id"]."'>Delete id</a>
                  </td>
              </tr>
          </table>";
    }
    echo "</table>";
}

.js文件

$(function() {
    $(".delete").click(function(){
        var element = $(this);
        var del_id = element.attr("id");
        var info = 'deleteid=' + del_id;
        var channel_id = element.attr("channel_id");
        if(confirm("Delete?\n\n" + channel_id)){
            $.ajax({
                type    : "POST",
                url     : "scripts/delete.php",
                data    : info,
                success : function(){}
            });
            $(this).parents(".show")
                .animate({ backgroundColor: "#003" }, "slow")
                .animate({ opacity: "hide" }, "slow");
        }
        return false;
    });
});

而delete.php有简单的删除行查询。

Answer 1

你可以试试这个：

的index.php

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

js文件

$(function() {
    $(".delete").click(function(){
                .........
    });
    $(".add").click(function(){
        var element = $(this);
        $.ajax({
          type    : "POST",
          url     : "scripts/add.php",
          data    : { add your variables } 
          success : function(){}
               $('#myTable > tbody:last').append('<tr><td>...</td><td>...</td><td>...</td></tr>');
          });
        return false;
    });
});

在你的add.php文件中，你可以返回一个json数组并将其读入新行。