JS对table添加删除一行

最新推荐文章于 2017-07-30 15:20:14 发布

原创最新推荐文章于 2017-07-30 15:20:14 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #table

本文介绍了一种利用AJAX技术实现网页中表单数据动态增加和删除的方法。通过JavaScript代码，实现了向服务器发送POST请求添加数据，并在成功后更新页面显示；同时也实现了DELETE请求来移除已有的数据项。

添加一行，并用AJAX提交数据。

  function submitForm() {

    var name = $("#name").val();
    var description = $("#description").val();
    var url = $("#url").val();

    $.ajax({
      url: '/admin/ops',
      type: 'post',
      data: {admin_site: {"name": name, "description": description, "url": url}},
      success: function(data) {
        if(data.success){
          var tb = document.getElementById("admin_site_table")
          var row = tb.insertRow(tb.rows.length-1);
          var cell = row.insertCell();
          cell.innerHTML = "<a href=" + url + ">" + name + "</a>";
          cell = row.insertCell();
          cell.innerText = description;
          cell = row.insertCell();
          cell.innerHTML = "<a href=" + url + ">" + url + "</a>";
          cell = row.insertCell();
          cell.innerHTML = "<input type='button' value='删除' class='btn btn-danger' onclick = 'delRow(this, " + data.id + ")'/>";

          $("#name").val("");
          $("#description").val("");
          $("#url").val("");

        }else{
          alert("添加失败!");
        }
      }
    });
  }

删除一行，并用AJAX实现提交数据。

  function validate() {
    if (confirm("确定删除?")) {
       return true;
    } else {
       return false;
    }
  }

  function delRow(btn, admin_site_id) {
    if(validate()){
      $.ajax({
        url: '/admin/ops/' + admin_site_id,
        type: 'delete',
        success: function(data) {
          if(data.success){
            var row = btn.parentNode.parentNode;
            row.parentNode.removeChild(row);
          }else{
            alert("删除失败!");
          }
        }
      });
    }
  }