Javascript DOM練習08
8425 ワード
<!DOCTYPE html>
<html>
<head>
<title>Javascript DOM 08</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="table.css"/>
</head>
<body>
<script type="text/javascript">
// 。
var name;
function trColor() {
//1, 。
var oTabNode = document.getElementById("mailtable");
//2， 。
var collTrNodes = oTabNode.rows;
//3， 。
for (var x = 1; x < collTrNodes.length - 1; x++) {
if (x % 2 == 1) {
collTrNodes[x].className = "one";
} else {
collTrNodes[x].className = "two";
}
collTrNodes[x].onmouseover = function() {
name = this.className;
this.className = "over";
}
collTrNodes[x].onmouseout = function() {
this.className = name;
}
}
}
onload = function() {
trColor();
}
// 。
function checkAll(node) {
// mail 。
var collMailNodes = document.getElementsByName("mail");
for (var x = 0; x < collMailNodes.length; x++) {
collMailNodes[x].checked = node.checked;
}
}
// 。
function checkAllByBut(num) {
var collMailNodes = document.getElementsByName("mail");
for (var x = 0; x < collMailNodes.length; x++) {
if (num > 1) {
collMailNodes[x].checked = !collMailNodes[x].checked;
}
else {
collMailNodes[x].checked = num;
}
}
}
// 。
function deleteMail(){
if (!confirm(" ？")) {
return;
}
// mail
var collMailNodes = document.getElementsByName("mail");
for (var x = 0; x < collMailNodes.length; x++) {
if (collMailNodes[x].checked) {
var oTrNode = collMailNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
x--;
}
}
trColor();
}
</script>
<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="all" onclick="checkAll(this)" />
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
11
</td>
<td>
11
</td>
<td>
11
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
22
</td>
<td>
22
</td>
<td>
22
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
33
</td>
<td>
33
</td>
<td>
33
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
44
</td>
<td>
44
</td>
<td>
44
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
55
</td>
<td>
55
</td>
<td>
55
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
66
</td>
<td>
66
</td>
<td>
66
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
117
</td>
<td>
117
</td>
<td>
17
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
118
</td>
<td>
118
</td>
<td>
118
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
119
</td>
<td>
119
</td>
<td>
119
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
1100
</td>
<td>
110
</td>
<td>
110
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
11a
</td>
<td>
11a
</td>
<td>
11a
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
11b
</td>
<td>
11b
</td>
<td>
1b1
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
11c
</td>
<td>
11c
</td>
<td>
11c
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
11d
</td>
<td>
11d
</td>
<td>
11d
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
11e
</td>
<td>
11e
</td>
<td>
11e
</td>
</tr>
<tr>
<th>
<input type="checkbox" name="all" onclick="checkAll(this)" />
</th>
<th colspan="3">
<input type="button" value=" " onclick="checkAllByBut(1)" />
<input type="button" value=" " onclick="checkAllByBut(0)" />
<input type="button" value=" " onclick="checkAllByBut(2)" />
<input type="button" value=" " onclick="deleteMail()" />
</th>
</tr>
</table>
</body>
</html>table {
border: #249bdb 1px solid;
width: 500px;
border-collapse: collapse;
}
table td {
border: #249bdb 1px solid;
padding: 5px;
}
table th {
border: #249bdb 1px solid;
padding: 5px;
background-color: rgb(200, 200, 200);
}
.one {
background-color: #9bf7d5;
}
.two {
background-color: #f3e99a;
}
.over {
background-color: #ef7125;
}