Question

我试图做一个删除行的功能，在删除行后我想提交一个表单。以下是代码：

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  text-transform: uppercase;
  text-align: center;
  background-color: #333;
  overflow: hidden;
  width: 100%;
  z-index: 1;
}
.naviMenu ul li {
  letter-spacing: 0.05em;
  color: white;
  padding: 14px 16px;
  display: inline-block;
  font-size: 14px;
}
.naviMenu ul li a {
  color: white;
  text-decoration: none;
}
.naviMenu ul li:hover {
  background-color: #111;
}

我可以删除表单行并且它正在提交表单，但是当我刷新页面时，已删除的行又回来了:(。有人可以告诉我我的代码有什么问题，谢谢:)。

Answer 1

正如 Adyson 和 charlietfl 所解释的那样，必须使用服务器端检查表单是否已被提交。

使用 Jquery ，您也可以将Cookie与js-cookie.js一起使用。

在提交表单时添加数据，检查刷新和删除行中是否存在数据。我做了一个小例子 CodePen 。

http://codepen.io/anon/pen/QdWXpJ

var d = Cookies.get('deleted-row'); // Check if cookie i define

if(d != undefined){ // If cookie is define
  removerow($('#a')); // Send element to function for delete row
}

$(".a-tabel").click(function(e) {
  e.preventDefault();
  removerow($('#a')); // Send element to function for delete row
  Cookies.set('deleted-row', 'yes'); // add cookie 
  $('#zone-form').submit();   
});

function removerow(el){
  el.find('tr:last').remove(); // Remove your row
}

您可以使用remove函数Cookies.remove('deleted-row');

删除Cookie

如何使用JQuery删除行和提交表单？

1 个答案: