Jquery动态表格

最新推荐文章于 2024-09-25 15:18:17 发布

ddjxcode

最新推荐文章于 2024-09-25 15:18:17 发布

阅读量1.4k

点赞数

分类专栏：积累分享文章标签： jquery 表单

本文链接：https://blog.csdn.net/aKuang_JH/article/details/78092205

版权

该博客介绍了如何使用JQuery动态地管理表格内容，包括添加新纪录、编辑现有记录和删除操作。用户在弹出的DIV表单中输入信息，保存后表格实时更新。此外，还提到了确认删除功能，确保用户在批量删除前作出明确决定。

摘要由CSDN通过智能技术生成

实现目的：

1添加新纪录弹出DIV表单，要求用户输入相应的字段信息。点击保存自动关闭后会在表格最后追加一行刚才的信息。

2.点击编辑时，会弹出一个div表单，要求用户对现有记录进行修改操作。关闭后表格更新信息。

3.点击删除操作会弹出警告，问用户是否真的删除，确定后记录才删除（加批量删除）

效果图：

初始图1-1

添加新纪录图1-2

编辑信息图1-3

页面代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<script type="text/javascript" src="js/jquery-1.6.3.js" ></script>
<script type="text/javascript" src="js/department.js"></script>
   <style type="text/css"> 
   .window{ 
       width:250px; 
      background-color:#d0def0; 
      position:absolute; 
      padding:2px; 
  	  margin:5px; 
      display:none; 
      } 
	td{  
    text-align:center;  
	  }
  </style> 
<body>
<form action="" >
<table border="1px" id="table1" align="center">
	<tr>
		<td colspan="9"><b>员工信息表</b></td>
	</tr>
  	<tr >
  		<td>编号</td>
  		<td>部门</td>
  		<td>姓名</td>
  		<td>职务</td>
  		<td>基本工资</td>
  		<td>考勤工资</td>
  		<td>绩效考核</td>
  		<td>公司福利</td>
  		<td>操作</td>
  	</tr>
  <tr>
  		<td id="1">1</td>
  		<td>技术部</td>
  		<td>XX</td>
  		<td>高级程序员</td>
  		<td>6000</td>
  		<td>1500</td>
  		<td>1500</td>
  		<td>200</td>
  		<td