이번에는 JavaScript를 사용한 DOM의 고급 응용에 대해 심층적으로 소개하겠습니다. JavaScript를 사용할 때의 주의 사항은 무엇입니까. 실제 사례를 살펴보겠습니다.
인터레이스 행 색상 변경
<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>2. 테이블 추가
테이블 동적 추가
<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>3. 테이블 삭제
<html lang="en"><head>
<meta charset="UTF-8">
<title>05-表格的添加 删除</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'); //行数
var vRow = oTab.tBodies[0].rows.length+1;
oBtn.onclick = function () { var oTr = document.createElement('tr');
vRow++; var oTd = document.createElement('td');
oTd.innerHTML = vRow;
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); var oTd = document.createElement('td');
oTd.innerHTML = '<a href="javaScript:;">删除</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick = function () { //注意:一定要从第0个tBodies上删除.
//this.parentNode 指的是 td
//this.parentNode.parentNode 指的是 tr
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}; //注意:一定要添加到第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>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>32</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>17</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>35</td>
<td></td>
</tr>
</tbody>
</table></div></body></html>4. 대소문자 무시, 퍼지 검색, 다중 키워드 검색
toLowerCase( ) 변환퍼지 검색 검색 발견되면 위치를 반환하고, 발견되지 않으면
<html lang="en"><head>
<meta charset="UTF-8">
<title>06-表格的搜索</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 oTxt = document.getElementById('name'); var oBtn = document.getElementById('btn1');
oBtn.onclick = function () { for (var i=0;i<oTab.tBodies[0].rows.length;i++){ //忽略大小写
//toLowerCase() 把字符串转成全小写的形式;
//把if里面两边都转成全小写的形式;
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); var sTxt = oTxt.value.toLowerCase(); //模糊搜索 search 当找到的时候,返回位置;找不到,返回-1
//search()
//多关键字搜索
//假设多个关键字之间用 空格 隔开的,以后可以使用正则表达式
var arr = sTxt.split(' '); //先把背景颜色重置
oTab.tBodies[0].rows[i].style.backgroundColor = ''; for (var j=0;j<arr.length;++j){ if (sTab.search(arr[j]) != -1){
oTab.tBodies[0].rows[i].style.backgroundColor = 'yellow';
}
}
}
}
} </script></head><body><div id="div1">
<div id="form">
姓名:<input id="name" type="text">
<input id="btn1" type="button" value="搜索">
</div>
<table id="tab1">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>32</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>17</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>35</td>
<td></td>
</tr>
</tbody>
</table></div></body></html>추천도서:
JavaScript 기본 응용 자세히 알아보기위 내용은 JavaScript DOM의 고급 애플리케이션에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
