本篇内容介绍了“原生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及表格搜索功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
