js013-js分离的DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>IP</th>
<th>端口</th>
</tr>
</thead>
<tbody id="i1">
<tr><td>1.2.3.6</td><td>8888</td></tr>
<tr><td>1.2.335.6</td><td>9999</td></tr>
<tr><td>1.2.335.99</td><td>9933</td></tr>
</tbody>
</table>

<table border="10">
<thead>
<tr>
<th>IP</th>
<th>端口</th>
</tr>
</thead>
<tbody >
<tr onmouseover="m_over(this)" onmouseout="m_out(this)"><td>1.2.3.6</td><td>8888</td></tr>
<tr onmouseover="m_over(this)" onmouseout="m_out(this)"><td>1.2.335.6</td><td>9999</td></tr>
<tr onmouseover="m_over(this)" onmouseout="m_out(this)"><td>1.2.335.99</td><td>9933</td></tr>
</tbody>
</table>
<script>
var trs = document.getElementById('i1').children;
for(var i = 0;i<trs.length;i++){
trs[i].onmouseover = function (){
this.style.backgroundColor = '#e75e15';//记得用‘this’,当前这个对象
}
trs[i].onmouseout = function (){
this.style.backgroundColor = '';
}
}

function m_over(self){
self.style.backgroundColor = 'purple';
}
function m_out(self){
self.style.backgroundColor = '';
}
</script>
</body>
</html>
posted @ 2022-11-23 20:22  wode-wode  阅读(33)  评论(0)    收藏  举报