jQuery生成动态表格

前言

工作中常常需要动态的添加或者删除表格行或者列,所以稍微整理了一下,实现了一些比较通用的功能。

效果

jQuery生成动态表格_第1张图片

  • 除表头外,第一行模拟从后台加载的数据,其余的行是动态添加
  • 点击保存后,该行自动变成第一行的效果
  • 点击删除时,如果该行未保存过,则直接删除;如果该行保存过,则会提示
  • 删除成功后,行号会自动维护
  • 复选框实现了全选、全不选、部分选择的效果
  • 每一行都会有一个固定的ID,和行号不一定相同
  • 如果需要动态删除列的话可以参考:$('#dynamic-table tr').find('td:last').remove();,删除最后一列

源文件

dynamicTable.html
源文件的内容就是下面的代码

代码





动态表格




	
行号 学号 姓名 性别 新增
1 1001 张三 删除

你可能感兴趣的:(JavaScript)