刷新后重新显示已删除的表格行

时间:2014-11-09 20:40:30

标签: javascript jquery html html-table rows

我有一个简单的html表,以及在单击删除时删除行的脚本,但是只要刷新页面,删除的行就会再次出现。我怎样才能真正删除文件中的行?我需要使用php吗?

HTML:

<table id="row"> 
  <tr>
    <td><a href=''>row1</a></td>
    <td><a  class='delete' href=''>Delete</a></td>  
  </tr>
  <tr>
    <td><a href=''>row2</a></td>
    <td><a  class='delete' href=''>Delete</a></td>  
  </tr>
  <tr>
    <td><a href=''>row3</a></td>
    <td><a  class='delete' href=''>Delete</a></td>  
  </tr>
</table>

脚本:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
    $("#row .delete").on("click",function() {
        var tr = $(this).closest('tr');
        tr.css("background-color","#FF3700");
        tr.fadeOut(400, function(){
            tr.remove().clone();
        });
        return false;
    });
});
  </script>

1 个答案:

答案 0 :(得分:0)

如果在静态HTML页面上创建此表,那么我不知道删除行并在刷新后保留删除的方法(可能你应该看一下本地对象存储的用法)。

如果使用从给定数据库获取的数据(使用php解析的数据)生成此表并使用html / css在页面上呈现,则是,即使在页面刷新后也应使用PHP删除该行。

您发布的jquery代码仅在您重新加载页面之前有效,因此当您重新加载页面时,一切都会回到初始状态,因为当您单击该X按钮(删除按钮)时,您并未实际删除任何内容......你只是隐藏了一排桌子。