How to use DOM to operate table and table search function in native js

This article introduces the relevant knowledge of "how to use DOM to operate table and table search function in native js". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Convenient operation of table in DOM tBobies (array) tHead tFoot rows (row) cells (cell) ID name age 1 Zhang San 23 _ window.onload = function () {var oTable = document.getElementById ('table1') alert (oTable.getElementsByTagName (' tbody') [0] .getElementsByTagName ('tr') [0] .getElementsByTagName (' td') [1] [xss_clean]) alert (oTable.tBodies [0] .rows [0] .cells [1] [xss_clean])} interlaced color, Highlight

ID

Name

Age

one

Zhang San

twenty-three

two

Reese.

twenty-four

three

Wang Wu

twenty-five

_ window.onload = function () {

Var oTable = document.getElementById ('table1')

Var oldColor =''/ / original background color

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

For (var I = 0; I < oTable.tBodies [0] .rows.length; iTunes +) {

OTable.tBodies [0] .rows [I] .onMouseover = function () {

OldColor = this.style.background; / / Save the original background color

This.style.background = 'yellow'

}

OTable.tBodies [0] .rows [I] .onmouseout = function () {

This.style.background = oldColor

}

When if (I% 2) {/ / I% 2 is 0, the condition is false

OTable.tBodies [0] .rows [I] .style.background = "# 999"

} else {

OTable.tBodies [0] .rows [I] .style.background = ""

}

}

}

Add rows, delete rows

ID

Name

Age

Operation

_ window.onload = function () {

Var oTable = document.getElementById ('table1'); / / get table

Var oName = document.getElementById ('name') / / get name text box

Var oAge = document.getElementById ('age') / / get the age text box

Var oBtn = document.getElementById ('btn') / / get add button

Var id = oTable.tBodies [0] .rows.length + 1; / / Save the value of id as a global variable to avoid id repetition

OBtn.onclick = function () {

Var oTr = document.createElement ('tr') / / create tr element

Tru [XSS _ clean] =''+ (id++) +''+ oName.value + / / assign a value to tr

'' +

OAge.value + 'Delete'

OTr.getElementsByTagName ('a') [0] .onclick = function () {/ / set the click time for the delete button

OTable.tBodies [0] .removeChild (this [XSS _ clean] [xss_clean])

}

OTable.tBodies [0] .appendChild (oTr)

}

}

Table search, ignore case, fuzzy query convenient operation of table in DOM tBobies (array) tHead tFoot rows (row) cells (cell)

ID

Name

Age

one

Zhang San

twenty-three

_ window.onload = function () {

Var oTable = document.getElementById ('table1')

Alert (oTable.getElementsByTagName ('tbody') [0] .getElementsByTagName (' tr') [0] .getElementsByTagName ('td') [1] [xss_clean])

Alert (oTable.tBodies [0] .rows [0] .cells [1] [xss_clean])

}

Interlaced discoloration and highlight

ID

Name

Age

one

Zhang San

twenty-three

two

Reese.

twenty-four

three

Wang Wu

twenty-five

_ window.onload = function () {

Var oTable = document.getElementById ('table1')

Var oldColor =''/ / original background color

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

For (var I = 0; I < oTable.tBodies [0] .rows.length; iTunes +) {

OTable.tBodies [0] .rows [I] .onMouseover = function () {

OldColor = this.style.background; / / Save the original background color

This.style.background = 'yellow'

}

OTable.tBodies [0] .rows [I] .onmouseout = function () {

This.style.background = oldColor

}

When if (I% 2) {/ / I% 2 is 0, the condition is false

OTable.tBodies [0] .rows [I] .style.background = "# 999"

} else {

OTable.tBodies [0] .rows [I] .style.background = ""

}

}

}

Add rows, delete rows

ID

Name

Age

Operation

_ window.onload = function () {

Var oTable = document.getElementById ('table1'); / / get table

Var oName = document.getElementById ('name') / / get name text box

Var oAge = document.getElementById ('age') / / get the age text box

Var oBtn = document.getElementById ('btn') / / get add button

Var id = oTable.tBodies [0] .rows.length + 1; / / Save the value of id as a global variable to avoid id repetition

OBtn.onclick = function () {

Var oTr = document.createElement ('tr') / / create tr element

Tru [XSS _ clean] =''+ (id++) +''+ oName.value + / / assign a value to tr

'' +

OAge.value + 'Delete'

OTr.getElementsByTagName ('a') [0] .onclick = function () {/ / set the click time for the delete button

OTable.tBodies [0] .removeChild (this [XSS _ clean] [xss_clean])

}

OTable.tBodies [0] .appendChild (oTr)

}

}

Table search, ignore case, fuzzy query

Name:

ID

Name

Age

one

Zhang San

twenty-three

two

Reese.

twenty-four

_ 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; iSum +) {/ / Loop each line

Var oTd = oTable.tBodies [0] .rows [I] .cells [1] [xss_clean] .toLowerCase ()

Var oInp = oName.value.toLowerCase ()

/ / if (oTd = = oInp) {/ / compare whether the values of the second column and the text line of each line are equal / / if (oInp.toLowerCase () = = oTd.toLowerCase ()) {/ / convert the values to lowercase first, then compare them, or convert them all to uppercase toUpperCase () if (oTd.search (oInp)! =-1) {/ / string, if it contains the position of the return character and does not include the return-1

OTable.tBodies [0] .rows [I] .style.background = 'red'

} else {

OTable.tBodies [0] .rows [I] .style.background =''

}

}

}

}

Name:

ID

Name

Age

one

Zhang San

twenty-three

two

Reese.

twenty-four

_ 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; iSum +) {/ / Loop each line

Var oTd = oTable.tBodies [0] .rows [I] .cells [1] [xss_clean] .toLowerCase ()

Var oInp = oName.value.toLowerCase ()

/ / if (oTd = = oInp) {/ / compare whether the values of the second column and the text line of each line are equal / / if (oInp.toLowerCase () = = oTd.toLowerCase ()) {/ / convert the values to lowercase first, then compare them, or convert them all to uppercase toUpperCase () if (oTd.search (oInp)! =-1) {/ / string, if it contains the position of the return character and does not include the return-1

OTable.tBodies [0] .rows [I] .style.background = 'red'

} else {

OTable.tBodies [0] .rows [I] .style.background =''

}

}

}

}

This is the end of the content of "how to use DOM to operate table and table search function in native js". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!