html用js给表格添加删除吗,表格的增加删除.html

Document

.show {

display: block;

}

.hide {

display: none;

}

城市名称:

空气质量指数:

确认添加

城市空气质量操作

var city = document.getElementById('city');

var air = document.getElementById('air');

var addBtn = document.getElementById('addBtn');

var dataHead = document.getElementById('dataHead');

var dataBody = document.getElementById('dataBody');

var data = {

city: '',

air: '',

}

Object.keys(data).forEach((item) => {

this.observe(data, item, data[item]);

});

city.onchange = function (e) {

data.city = e.target.value;

}

air.onchange = function (e) {

data.air = e.target.value;

}

addBtn.onclick = function (e) {

if (data.city && data.air) {

dataBody.appendChild(createData());

remove();

} else {

alert('city或air不能为空')

}

}

function createData() {

var dataBody = `

${data.city}${data.air}删除`;

var table = document.createElement('tbody');

table.innerHTML = dataBody;

data.city = '';

data.air = '';

city.value = '';

air.value = '';

return table.firstChild;

}

function remove() {

var removes = [...document.getElementsByClassName('remove')];

var dataItems = [...document.getElementsByClassName('dataItem')]

console.log(removes);

removes.forEach((item,index) => {

console.log(item);

item.addEventListener('click', function(){

dataItems[index].remove();

})

})

}

function observe(data, key, value) {

Object.defineProperty(data, key, {

get() {

return value;

},

set(newVal) {

value = newVal;

}

});

}

一键复制

编辑

原始数据

按行查看

历史