制作模态框的HTML结构,模态框作业.html

用户信息动态添加

th {

text-align: center;

}

td {

vertical-align: middle!important;

text-align: center;

}

名字

年龄

添加

重置

用户信息表

序号名字年龄操作

暂无数据

删除全部

确认删除吗？

取消

确认

var dataList = [];

$('.add').click(function() {

var name = $('#username').val();

var age = $('#userage').val();

if (name != '' && age != '') {

dataList.push({

name: name,

age: age

});

loadHtml();

} else {

alert('您的输入内容不可为空');

}

});

$('.modal').bind('show.bs.modal', function(e) {

var ele = e.relatedTarget;

var _index = $(ele).data('index');

$('.sure').on('click', function() {

dataList.splice(_index, 1);

loadHtml();

$('.sure').off('click');

});

$('.close').on('click', function() {

$('.sure').off('click');

});

$('.cancel').on('click', function() {

$('.sure').off('click');

});

});

function loadHtml() {

if (dataList.length != 0) {

$('.table tbody').html('');

$(dataList).each(function(index, item) {

// $('

' +

// '

' + (index + 1) + '' +

// '

' + item.name + '' +

// '

' + item.age + '' +

// '

删除' +

// '

').appendTo('.table tbody');

$(`

${index+1}${item.name}${item.age}删除

`).appendTo('.table tbody');

});

} else {

$('.table tbody').html(`

暂无数据

`);

}

}

function create() {

}

// $('.modal').bind('show.bs.modal', function(e) {

// var id = $(e.relatedTarget).data("wahtever");

// $('.modal-footer .btn').on('click', function() {

// var iSno = $(this).index();

// if (iSno == 1) {

// var no = $(this).index();

// dataList.splice(id, 1);

// $('.table tbody').html('');

// $(dataList).each(function(index, item) {

// // $('.table tbody').append(`

// //

// //

${index+1}

// //

${item.name}

// //

${item.age}

// //

删除

// //

// // `);

// });

// }

// });

// });

一键复制

编辑

Web IDE

原始数据

按行查看

历史