溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“原生js中怎么用DOM操作table及表格搜索功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
tBobies(數組) tHead tFoot rows(行) cells(單元格)
<body>
<table border="1" id="table1" width="500">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>23</td>
</tr>
</tbody>
</table>
<script>
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)
}
</script>
</body><body>
<table border="1" id="table1" width="500">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>里斯</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>王武</td>
<td>25</td>
</tr>
</tbody>
</table>
<script>
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 = ""
}
}
}
</script>
</body><body>
<input type="text" id="name">
<input type="text" id="age">
<input type="button" id="btn" value="添加">
<table border="1" id="table1" width="500">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
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 = '<td>' + (id++) + '</td><td>' + oName.value + //給 tr 賦值
'</td><td>' +
oAge.value + '</td><td><a href="javascript:;">刪除</a></td>'
oTr.getElementsByTagName('a')[0].onclick = function () { // 給刪除按鈕設置點擊時間
oTable.tBodies[0].removeChild(this.parentNode.parentNode)
}
oTable.tBodies[0].appendChild(oTr)
}
}
</script>
</body>tBobies(數組) tHead tFoot rows(行) cells(單元格)
<body>
<table border="1" id="table1" width="500">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>23</td>
</tr>
</tbody>
</table>
<script>
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)
}
</script>
</body><body>
<table border="1" id="table1" width="500">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>里斯</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>王武</td>
<td>25</td>
</tr>
</tbody>
</table>
<script>
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 = ""
}
}
}
</script>
</body><body>
<input type="text" id="name">
<input type="text" id="age">
<input type="button" id="btn" value="添加">
<table border="1" id="table1" width="500">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
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 = '<td>' + (id++) + '</td><td>' + oName.value + //給 tr 賦值
'</td><td>' +
oAge.value + '</td><td><a href="javascript:;">刪除</a></td>'
oTr.getElementsByTagName('a')[0].onclick = function () { // 給刪除按鈕設置點擊時間
oTable.tBodies[0].removeChild(this.parentNode.parentNode)
}
oTable.tBodies[0].appendChild(oTr)
}
}
</script>
</body><body>
姓名：<input type="text" id="name"><input type="button" value="搜索" id="btn">
<table border="1" id="table1" width="500">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>里斯</td>
<td>24</td>
</tr>
</tbody>
</table>
<script>
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 = ''
}
}
}
}
</script>
</body><body>
姓名：<input type="text" id="name"><input type="button" value="搜索" id="btn">
<table border="1" id="table1" width="500">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>里斯</td>
<td>24</td>
</tr>
</tbody>
</table>
<script>
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 = ''
}
}
}
}
</script>
</body>“原生js中怎么用DOM操作table及表格搜索功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
