html表格修改事件,表格添加移除事件.html

Document

input {

outline: none;

border-radius: 3px;

border: 1px solid #999999;

padding: 8px;

transition: all 0.3s;

}

table {

width: 800px;

text-align: left;

border-radius: 3px;

border-collapse: collapse;

}

table table td {

border: 1px solid #999999;

padding: 5px;

}

table thead th {

border: 1px solid #999999;

padding: 8px;

color: #666666;

font-weight: 550;

}

table tbody td {

border: 1px solid #999999;

padding: 8px;

color: #666666;

}

table tbody tr {

transition: all 0.3s;

}

.header {

padding: 20px 0;

}

.footer {

position: absolute;

/* top: 400px; */

left: 0;

bottom: 100px;

padding: 20px 0;

}

button {

border: 0;

background-color: #5bc0de;

border-radius: 3px;

padding: 5px 10px;

color: #ffffff;

outline: none;

}

a {

text-decoration: none;

color: #999999;

}

b {

font-weight: 400;

}

添加：

添加

变色：

开启移入变色

ID姓名年龄操作

1张三33 删除2李四34 删除3王五25 删除4赵六16 删除5王四44 删除6Danny23 删除

搜索：

搜索

排序：

年龄从小排序

var username = document.querySelector('#username');

var oAge = document.querySelector('#age');

var oAdd = document.querySelector('#add');

var oTbody = document.querySelector('tbody');

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

var user = username.value.trim();

var ageTxt = oAge.value.trim();

if (isNaN(ageTxt)) {

alert('年龄只能为数字');

return;

}

if (user == '' || ageTxt == '') {

alert('内容不能为空');

return;

}

var oTr = document.createElement('tr');

var oTd = document.createElement('td');

var otr = document.querySelectorAll('tr');

var num = otr.length;

oTd.innerHTML = num;

oTr.appendChild(oTd);

var oTd = document.createElement('td');

oTd.innerHTML = username.value;

oTr.appendChild(oTd);

var oTd = document.createElement('td');

oTd.innerHTML = oAge.value;

oTr.appendChild(oTd);

var oTd = document.createElement('td');

oTd.innerHTML = "删除";

oTr.appendChild(oTd);

oTd.style.cursor = 'pointer';

oTbody.appendChild(oTr);

username.value = '';

oAge.value = '';

/* oTr.innerHTML='

+i+' */

})

oTbody.onclick = function (e) {

if (e.target.tagName == 'B') {

oTbody.removeChild(e.target.parentNode.parentNode);

}

}

var oChange = document.querySelector('#change');

var tag = true;

oChange.onclick = function () {

var txt = oChange.innerHTML;

if (tag) {

oChange.innerHTML = '关闭移入变色';

oChange.style.backgroundColor = '#c9302c';

oTbody.onmouseover = function (e) {

if (e.target.tagName == 'TD') {

e.target.parentNode.style.backgroundColor = '#eeeeee';

}

}

oTbody.onmouseout = function (e) {

if (e.target.tagName == 'TD') {

e.target.parentNode.style.backgroundColor = '';

}

}

tag = false;

}

else {

oChange.innerHTML = '开启移入变色';

oChange.style.backgroundColor = '#5bc0de';

oTbody.onmouseover = null;

oTbody.omnmouseout = null;

tag = true;

}

}

var oInput = document.querySelector('#find');

var oSearch = document.querySelector('#search');

oSearch.onclick = function () {

var txt = oInput.value;

if (txt == '') {

alert('请输入具体的姓名');

return;

}

else {

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

var user = oTbody.children[i].children[1].innerText;

if (txt == user) {

oTbody.children[i].style.backgroundColor = 'yellow';

}

else {

oTbody.children[i].style.backgroundColor = '';

}

}

oInput.value = '';

}

}

var oSort = document.querySelector('#sort');

oSort.onclick = function () {

var oTrs = [];

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

oTrs.push(oTbody.children[i]);

}

oTrs.sort(function (a, b) {

var n1 = parseInt(a.cells[2].innerText);

var n2 = parseInt(b.cells[2].innerText);

return n1 - n2;

})

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

oTbody.appendChild(oTrs[i]);

}

}

var inputs = document.querySelectorAll('input');

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

inputs[i].onfocus = function (e) {

this.style.boxShadow = '5px 1px 5px 2px rgba(45, 183, 218, 0.3)';

this.style.borderColor = 'rgb(45,183,218)';

}

inputs[i].onblur = function () {

this.style.boxShadow = '';

this.style.borderColor = '';

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史