html中用js操作表格,原生js中用DOM操作table以及表格搜索功能

DOM中table的便捷操作

tBobies(数组) tHead tFoot rows(行) cells(单元格)

ID姓名年龄

1张三23

window.onload = function () {

var oTable = document.getElementById('table1')

alert(oTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].innerHTML)

alert(oTable.tBodies[0].rows[0].cells[1].innerHTML)

}

隔行变色、高亮

ID姓名年龄

1张三232里斯243王武25

window.onload = function () {

var oTable = document.getElementById('table1');

var oldColor = '' //原来的背景颜色

alert(oTable.tBodies[0].rows.length)

for(var i = 0; i < oTable.tBodies[0].rows.length; i++){

oTable.tBodies[0].rows[i].onmouseover = function(){

oldColor = this.style.background; //将原来的背景颜色保存起来

this.style.background = 'yellow'

}

oTable.tBodies[0].rows[i].onmouseout = function(){

this.style.background = oldColor

}

if(i % 2){ // i%2为0时，条件为假

oTable.tBodies[0].rows[i].style.background = "#999"

}else{

oTable.tBodies[0].rows[i].style.background = ""

}

}

}

添加行、删除行

ID姓名年龄操作

window.onload = function () {

var oTable = document.getElementById('table1'); //获取table

var oName = document.getElementById('name') //获取姓名文本框

var oAge = document.getElementById('age') //获取年龄文本框

var oBtn = document.getElementById('btn') //获取添加按钮

var id = oTable.tBodies[0].rows.length + 1; //将 id 的值作为全局变量保存，避免 id 重复

oBtn.onclick = function () {

var oTr = document.createElement('tr') //创建 tr 元素

oTr.innerHTML = '

' + (id++) + '' + oName.value + //给 tr 赋值

'

' +

oAge.value + '

删除'

oTr.getElementsByTagName('a')[0].onclick = function () {  // 给删除按钮设置点击时间

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

}

oTable.tBodies[0].appendChild(oTr)

}

}

表格搜索、忽略大小写、模糊查询

DOM中table的便捷操作

tBobies(数组) tHead tFoot rows(行) cells(单元格)

ID姓名年龄

1张三23

window.onload = function () {

var oTable = document.getElementById('table1')

alert(oTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].innerHTML)

alert(oTable.tBodies[0].rows[0].cells[1].innerHTML)

}

隔行变色、高亮

ID姓名年龄

1张三232里斯243王武25

window.onload = function () {

var oTable = document.getElementById('table1');

var oldColor = '' //原来的背景颜色

alert(oTable.tBodies[0].rows.length)

for(var i = 0; i < oTable.tBodies[0].rows.length; i++){

oTable.tBodies[0].rows[i].onmouseover = function(){

oldColor = this.style.background; //将原来的背景颜色保存起来

this.style.background = 'yellow'

}

oTable.tBodies[0].rows[i].onmouseout = function(){

this.style.background = oldColor

}

if(i % 2){ // i%2为0时，条件为假

oTable.tBodies[0].rows[i].style.background = "#999"

}else{

oTable.tBodies[0].rows[i].style.background = ""

}

}

}

添加行、删除行

ID姓名年龄操作

window.onload = function () {

var oTable = document.getElementById('table1'); //获取table

var oName = document.getElementById('name') //获取姓名文本框

var oAge = document.getElementById('age') //获取年龄文本框

var oBtn = document.getElementById('btn') //获取添加按钮

var id = oTable.tBodies[0].rows.length + 1; //将 id 的值作为全局变量保存，避免 id 重复

oBtn.onclick = function () {

var oTr = document.createElement('tr') //创建 tr 元素

oTr.innerHTML = '

' + (id++) + '' + oName.value + //给 tr 赋值

'

' +

oAge.value + '

删除'

oTr.getElementsByTagName('a')[0].onclick = function () {  // 给删除按钮设置点击时间

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

}

oTable.tBodies[0].appendChild(oTr)

}

}

表格搜索、忽略大小写、模糊查询

姓名：

ID姓名年龄

1张三232里斯24

window.onload = function () {

var oTable = document.getElementById('table1');

var oName = document.getElementById('name')

var oBtn = document.getElementById('btn')

oBtn.onclick = function()

{

for(var i = 0; i < oTable.tBodies[0].rows.length; i++){ //循环每一行

var oTd = oTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()

var oInp = oName.value.toLowerCase()

//if(oTd == oInp){ //比较每一行的第二列和文本行的值是否相等//if(oInp.toLowerCase() == oTd.toLowerCase()){ //将值先转成小写，再进行比较, 或者全部转成大写 toUpperCase()if(oTd.search(oInp) != -1){ //字符串中的search()，如果包含返回字符的位置、不包含返回 -1

oTable.tBodies[0].rows[i].style.background = 'red'

}else{

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

}

}

}

}

姓名：

ID姓名年龄

1张三232里斯24

window.onload = function () {

var oTable = document.getElementById('table1');

var oName = document.getElementById('name')

var oBtn = document.getElementById('btn')

oBtn.onclick = function()

{

for(var i = 0; i < oTable.tBodies[0].rows.length; i++){ //循环每一行

var oTd = oTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()

var oInp = oName.value.toLowerCase()

//if(oTd == oInp){ //比较每一行的第二列和文本行的值是否相等//if(oInp.toLowerCase() == oTd.toLowerCase()){ //将值先转成小写，再进行比较, 或者全部转成大写 toUpperCase()if(oTd.search(oInp) != -1){ //字符串中的search()，如果包含返回字符的位置、不包含返回 -1

oTable.tBodies[0].rows[i].style.background = 'red'

}else{

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

}

}

}

}