JavaScript表格简单增删改查前几天一个刚入门的小同学跟我聊天,问我一个简单的表格增删改查问题,大致需求是这样的:如图： 有一个含有序号、姓名、年龄以及操作（修改和删除）的四列表格，在表格上方有三个text文本框，分别对应序号、姓名、年龄，其后有两个按钮，分别为修改和增加。1、当点击增加按钮时，按照一个模板增加一行，序号对应的自动加1，当增加到限定行数时弹框提示；2、当点击操作列内修改链接时可以将本行数据展示在表格对应的文本框中，修改后，点击修改按钮，将信息回显至原来的行内；3、当点击操
前几天一个刚入门的小同学跟我聊天,问我一个简单的表格增删改查问题,大致需求是这样的:
如图：
下图内容是固定的。
有一个含有序号、姓名、年龄以及操作（修改和删除）的四列表格，在表格上方有三个text文本框，分别对应序号、姓名、年龄，其后有两个按钮，分别为修改和增加。
1、当点击增加按钮时，按照一个模板（姓名：张三，年龄：20）从序号1开始增加1行，每次点击增加按钮，序号自动加1，当增加到限定行数时（比如：10行）弹框提示；
2、当点击操作列内修改链接时可以将本行数据展示在表格对应的文本框中，修改后，点击修改按钮，将信息回显至原来的行内；
3、当点击操作列内删除链接时可以删除本行数据；
4、假如有已经删除的行，在点击增加时，按照从小到大的次序将空缺的行依次插入到表格中，原有的数据也要恢复。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript表格增删改查</title>
<script type="text/javascript">
var count = 0;//主计数器,用于记录当前增加了多少行
var upNum = 10;//用于限制增加的最大行数
var arr = new Array();//二维数组,用于存储一位数组
var arr1 = new Array();//一维数组,用于存储每次删除的行内容
var bigId = 0;//记录出现过的最大ID,用于判断正常增加行还是插入被删除的行
function zengjia() {
var table = document.getElementById("table");
var tr = document.createElement("tr");//创建tr标签
if (arr.length > 0) {
//判断是否有被删除的行,若无,正常在最后添加
var temp = 0;//定义一个变量,用于临时存储交换数据
if (arr.length > 1) {
//判断数组中元素个数是否大于1个,如果大于一个就从小到大冒泡排序
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
//parseInt用于转换string为int,否则比较时会字典排序
if (parseInt(arr
最低0.47元/天 解锁文章
770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
