java表格增删改查_[Java教程]js实现表格的增删改查

[Java教程]js实现表格的增删改查

0 2017-01-12 00:06:43

这份代码实现了对表格的增加，删除，更改，查询。

点击一次添加按钮，表格会增加一行。

点击重置按钮，输入框的内容会被清空。

添加一行后，最后两格为更改和删除。点击更改，原有内容会各自显示在一个输入框内，此时更改二字变为保存，更改内容后，点击保存，内容又呈现不可更改状态，保存二字又变为修改；点击删除，删除本行。

在搜索框里输入对应文本，点击搜索，表格内匹配的文本背景变为其他颜色。

表格的增删改查

table {

text-align: center;

border-collapse: collapse;

border: 1px solid gray;

}

#tr1 {

background: #99d6ff;

}

a {

text-decoration: none;

color: black;

}

window.οnlοad=function()

{var res = document.getElementById('res')

var oTab=document.getElementById('table1')

var oName=document.getElementById('name')

var oAge=document.getElementById('age')

var oBtn=document.getElementById('btn')

var oSearch=document.getElementById('search')

var oSearchBtn=document.getElementById('searchBtn')

var id=oTab.tBodies[0].rows.length//定义序号变量

oBtn.οnclick=function()

{

var oTr=document.createElement('tr')

var oTd=document.createElement('td')

oTd.innerHTML=id++

oTr.appendChild(oTd)

var oTd=document.createElement('td')

oTd.innerHTML=oName.value

oTr.appendChild(oTd)

var oTd=document.createElement('td')

oTd.innerHTML=oAge.value

oTr.appendChild(oTd)

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

oTr.appendChild(td3);

td3.innerHTML= '更改';

td3.style.cursor = 'pointer';

td3.onclick = function(){

var ce = this.parentNode.cells;

if (/.*更改.*/.test(td3.innerHTML)){

for( var i = 0; i < ce.length - 2; i++) {

var txt = document.createElement('input');

txt.type = 'text';

var ci = ce[i];

txt.value =ci.innerHTML;

ci.innerHTML = ' ';

ci.appendChild(txt);

}

td3.innerHTML= '保存';

}

else{

for( var i = 0; i < ce.length - 2; i++){

var ci = ce[i];

ci.innerHTML = ci.children[0].value;

}

td3.innerHTML= '更改';

}

}//更改

var oTd=document.createElement('td')

oTd.innerHTML='删除'

oTr.appendChild(oTd)//添加表格行

oTd.getElementsByTagName('a')[0].οnclick=function()

{

oTab.tBodies[0].removeChild(this.parentNode.parentNode)

}//删除表格行

oTab.tBodies[0].appendChild(oTr)

}

oSearchBtn.οnclick=function()

{

for( var i=0; i

{

var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()

var sTxt=oSearch.value.toLowerCase()

var attr=sTxt.split('')

oTab.tBodies[0].rows[i].style.background=''

for( var j=0; j

{

if(sTab.search(attr[j])!=-1)

{

oTab.tBodies[0].rows[i].style.background='#99d6ff';

}

}

}

}//模糊搜索，多关键字搜索

res.οnclick= function () {

document.getElementById('form').reset();

//重置

}

}

name：

age：

ID

name

age

change

delete

本文网址：http://www.shaoqun.com/a/291791.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JS

0