html表格增加删除和修改,表格的增删改demo

前端菜鸟，下午没什么活儿，写了个不过脑子的demo，

十分喜欢妖尾，就用妖尾做了模拟数据，大伙儿轻喷。

设计感为0，页面配色丑得我都不想看，在此膜拜我司UI工程师，

很多实现功能的地方没有想到更好的办法，希望各位大佬斧正！

效果图

html结构

姓名性别公会属性级别操作

name1sex1party1proper1level1

编辑

删除

添加

删除

姓名:

性别:

请选择

女

男

公会:

请选择

妖精的尾巴

剑齿之虎

蛇姬之鳞

魔女之罪

属性:

级别:

请选择

普通

S

SS

百年

END

取消

确定

css样式

html {

height: 100%;

}

body {

height: 100%;

margin: 0;

padding: 0;

}

.contain {

width: 80%;

margin: 0 auto;

padding-top: 20px;

}

table {

width: 800px;

margin: 0 auto;

}

thead tr {

background-color: #009BCD;

color: #fff;

}

tr {

color: #000;

height: 30px;

line-height: 30px;

background-color: #eee;

text-align: center;

}

td {

display: inline-block;

}

td:nth-child(1) {

width: 5%;

}

td:nth-child(2) {

width: 20%;

}

td:nth-child(3) {

width: 5%;

}

td:nth-child(4) {

width: 19%;

}

td:nth-child(5) {

width: 19%;

}

td:nth-child(6) {

width: 10%;

}

td:nth-child(7) {

width: 20%;

}

.ope {

color: #fff;

width: 30%;

height: 20px;

line-height: 20px;

border-radius: 5px;

margin: 10px;

padding: 3px;

cursor: pointer;

}

.edit {

float: left;

background-color: #00C4E1;

border: 1px solid #54AAC4;

}

.del {

float: right;

background-color: #EA4D45;

border: 1px solid #B84F4D;

}

.tractive {

background-color: #ddd;

}

.footer {

height: 50px;

}

.add {

width: 50px;

background-color: #51A736;

border: 1px solid #319517;

text-align: center;

float: left;

}

.delall {

width: 50px;

background-color: #EA4D45;

border: 1px solid #B84F4D;

text-align: center;

float: left;

}

.mask {

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.6);

position: absolute;

left: 0;

top: 0;

display: none;

}

.model {

background-color: #eee;

border: 5px dashed #009DCE;

width: 300px;

padding: 20px 30px;

box-sizing: border-box;

border-radius: 10px;

box-shadow: 2px 2px 10px #333;

display: none;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

}

.model>div {

height: 40px;

line-height: 40px;

}

.model input {

height: 25px;

width: 170px;

}

.model select {

height: 30px;

width: 175px;

}

.true {

width: 50px;

background-color: #51A736;

border: 1px solid #319517;

text-align: center;

float: right;

}

.false {

width: 50px;

background-color: #EA4D45;

border: 1px solid #B84F4D;

text-align: center;

float: right;

}

获取数据

从存储中取数据，如果存储中灭有数据，从json文件中取模拟数据

ajax默认是异步，防止出现listAll为空的情况，这里将ajax手动设置为同步，async值设置为false

// 取数据

var temp = localStorage.getItem("temp");

// 获取对象数据

var listAll = JSON.parse(temp);

// 若没有缓存，从模拟json中获取数据

if (temp == null) {

var alldata = [];

$.ajax({

url: "./tail.json",

async: false,

type: "post",

dataType: "json",

success: function (data) {

for (var i = 0; i < data.length; i++) {

alldata.push(data[i]);

};

localStorage.setItem("temp", JSON.stringify(alldata));

temp = localStorage.getItem("temp");

listAll = JSON.parse(temp);

}

})

}

//执行函数

redata();

modelope();

delall();

check();

渲染表格函数

渲染表格的时候，同时将此时的listAll存入本地

// 渲染表格函数

function redata() {

var str = "";

for (var i = 0; i < listAll.length; i++) {

str +=

'

' +

'

' +

'

' + listAll[i].name + '' +

'

' + listAll[i].sex + '' +

'

' + listAll[i].party + '' +

'

' + listAll[i].proper + '' +

'

' + listAll[i].level + '' +

'

' +

'

编辑

' +

'

删除

' +

'

' +

'

'

}

$("tbody").html(str);

localStorage.setItem("temp", JSON.stringify(listAll));

}

添加、编辑、单项删除

添加功能和编辑功能用的是同一个模块，这里设置了一个flag，用来判断是添加动作还是编辑动作

添加动作时，打开模板的时候，清空一下所有的内容

点击模态框确定按钮时，如果是添加动作，就执行push。如果是编辑动作，就执行重新赋值操作

添加、编辑、单项删除动作执行完毕之后，都重新渲染一遍table表格

// 添加、编辑、单项删除

function modelope() {

var flag = "";

var index;

// 添加

$(".footer .add").on("click", function () {

flag = "add";

$(".mask").show();

$(".model").show();

$(".model .name input").val("");

$(".model .sex select").val("");

$(".model .party select").val("");

$(".model .proper input").val("");

$(".model .level select").val("");

});

// 模态框取消按钮

$(".model .false").on("click", function () {

$(".mask").hide();

$(".model").hide();

});

// 模态框确定按钮

$(".model .true").on("click", function () {

$(".mask").hide();

$(".model").hide();

if (flag == "add") {

var name = $(".model .name input").val();

var sex = $(".model .sex select").val();

var party = $(".model .party select").val();

var proper = $(".model .proper input").val();

var level = $(".model .level select").val();

listAll.push({

"name": name,

"sex": sex,

"party": party,

"proper": proper,

"level": level

});

} else if (flag == "edit") {

listAll[index].name = $(".model .name input").val();

listAll[index].sex = $(".model .sex select").val();

listAll[index].party = $(".model .party select").val();

listAll[index].proper = $(".model .proper input").val();

listAll[index].level = $(".model .level select").val();

}

redata();

});

// 删除

$("tbody").on("click", ".del", function () {

var index = $(this).parents("tr").index();

listAll.splice(index, 1);

redata();

});

// 编辑

$("tbody").on("click", ".edit", function () {

flag = "edit";

index = $(this).parents("tr").index();

$(".mask").show();

$(".model").show();

$(".model .name input").val(listAll[index].name);

$(".model .sex select").val(listAll[index].sex);

$(".model .party select").val(listAll[index].party);

$(".model .proper input").val(listAll[index].proper);

$(".model .level select").val(listAll[index].level);

});

}

全选按钮状态改变

利用checkbox类型input的checked属性判断

获取checkall元素的属性值，并且遍历所有的checksin元素，将这个属性值赋给所有的checksin

checksin如果是选中的，累加，和全部长度比较

checksin存在一个未选中，则，全选按钮未选中

// 全选按钮状态改变

function check() {

$(".checkall").on("click", function () {

// checked是DOM元素的一个属性，需要通过[0]访问

var flag = $(this)[0].checked;

$(".checksin").each(function () {

$(this)[0].checked = flag;

})

});

$(".checksin").on("click", function () {

var i = 0;

$(".checksin").each(function () {

// 存在一个未选中，则，全选按钮未选中

if ($(this)[0].checked == false) {

$(".checkall")[0].checked = false;

} else {

// 如果是选中的，累加，和全部长度比较

i += 1;

if (i == $(".checksin").length) {

$(".checkall")[0].checked = true;

}

}

})

});

}

批量删除操作

遍历所有的checksin元素，如果是被选中的，移除此项所在的tr

获取页面的表格内容，将listAll清空之后，重新将表格内容放到listAll中

这里不知道直接对listAll的方法，使用单项删除的splice的方法行不通，因为listAll的长度在实时改变

这里求大佬指教有没有好的办法

// 批量删除

function delall() {

$(".footer .delall").on("click", function () {

$("tbody .checksin").each(function () {

if ($(this)[0].checked == true) {

$(this).parents("tr").remove();

}

});

listAll = [];

$("tbody tr").each(function () {

var name = $(this).children("td").eq(1).html();

var sex = $(this).children("td").eq(2).html();

var party = $(this).children("td").eq(3).html();

var proper = $(this).children("td").eq(4).html();

var level = $(this).children("td").eq(5).html();

listAll.push({

"name": name,

"sex": sex,

"party": party,

"proper": proper,

"level": level

});

})

localStorage.setItem("temp", JSON.stringify(listAll));

})

}

模拟的json数据

[{

"name": "纳兹·多拉格尼尔",

"sex": "男",

"party": "妖精的尾巴",

"proper": "火-灭龙魔导师",

"level": "END"

},

{

"name": "温蒂",

"sex": "女",

"party": "妖精的尾巴",

"proper": "空-灭龙魔导师",

"level": "SS"

},

{

"name": "罗格",

"sex": "男",

"party": "剑咬之虎",

"proper": "影-灭龙魔导师",

"level": "SS"

},

{

"name": "斯汀",

"sex": "男",

"party": "剑咬之虎",

"proper": "光-灭龙魔导师",

"level": "SS"

},

{

"name": "克布拉",

"sex": "男",

"party": "魔女之罪",

"proper": "毒-灭龙魔导师",

"level": "SS"

},

{

"name": "拉库萨斯",

"sex": "男",

"party": "妖精的尾巴",

"proper": "雷-灭龙魔导师",

"level": "百年"

},

{

"name": "葛吉尔",

"sex": "男",

"party": "妖精的尾巴",

"proper": "铁-灭龙魔导师",

"level": "SS"

}

]