今回は JavaScript の DOM の高度なアプリケーションについて詳しくご紹介します JavaScript を使用した DOM の高度なアプリケーションの 注意事項 について、実際の事例を見てみましょう。
インターレース行の色の変更<html lang="en"><head> <meta charset="UTF-8"> <title>04-表格的应用</title> <style> table{ margin: 100px auto; width: 300px; text-align: center; background-color: black; } table tr { background-color: white; } </style> <script> window.onload = function () { var oTab = document.getElementById('tab1'); //获取第二行的'张三'// alert( oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML); //table独有的简单操作 //上面的代码可以简写成下面的格式;// alert( oTab.tBodies('tbody')[0].rows('tr')[1].cells('td')[1].innerHTML); /** *90年代,div+css没人用,人们用的几乎全是table,于是乎,就有了table的便捷操作. * tBodies(一个table里可以有多个tbody),tHead,tFoot,rows,cells等便捷操作 * */ //隔行变色 var aRow = oTab.tBodies[0].rows;// alert(aRow.length); //记录一下颜色 var oldColor = null; for(var i=0;i<aRow.length;i++){ aRow[i].onmouseover = function () { //先记录一下之前的颜色 oldColor = this.style.backgroundColor; this.style.background = 'green'; } aRow[i].onmouseout = function () { this.style.backgroundColor = oldColor; } if (i%2){ aRow[i].style.background = ''; }else { aRow[i].style.background = '#ccc'; } } } </script></head><body><table id="tab1"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>27</td> </tr> <tr> <td>2</td> <td>张三</td> <td>32</td> </tr> <tr> <td>3</td> <td>李四</td> <td>17</td> </tr> <tr> <td>4</td> <td>王五</td> <td>28</td> </tr> <tr> <td>5</td> <td>张伟</td> <td>35</td> </tr> </tbody></table></body></html>
<html lang="en"><head> <meta charset="UTF-8"> <title>04-表格的添加 删除</title> <style> #div1{ text-align: center; } #div1 #form{ margin: 100px 0 10px; } #div1 table{ margin: 0px auto; width: 300px; text-align: center; background-color: black; } table tr { background-color: white; } </style> <script> window.onload = function () { var oTab = document.getElementById('tab1'); var oName = document.getElementById('name'); var oAge = document.getElementById('age'); var oBtn = document.getElementById('btn1'); oBtn.onclick = function () { var oTr = document.createElement('tr'); var oTd = document.createElement('td'); oTd.innerHTML = oTab.tBodies[0].rows.length+1; 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); //注意:一定要添加到第0个tBodies上 oTab.tBodies[0].appendChild(oTr); } } </script></head><body><div id="div1"> <div id="form"> 姓名:<input id="name" type="text"> 年龄:<input id="age" type="text"> <input id="btn1" type="button" value="添加"> </div> <table id="tab1"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>27</td> </tr> <tr> <td>2</td> <td>张三</td> <td>32</td> </tr> <tr> <td>3</td> <td>李四</td> <td>17</td> </tr> <tr> <td>4</td> <td>王五</td> <td>28</td> </tr> <tr> <td>5</td> <td>张伟</td> <td>35</td> </tr> </tbody> </table></div></body></html>
toLowerCase()
あいまい検索検索 見つかった場合は位置を返し、見つからない場合は -1 を返します。さらにエキサイティングなコンテンツがございますので、php 中国語 Web サイトの他の関連記事にもご注目ください。
推奨読書:
JavaScriptの基本的な応用を深く理解する
JSで注意すべき8つの基礎知識以上がJavaScript の DOM の高度なアプリケーションの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。