但行好事莫问前程 学习笔记
[但行好事莫问前程 学习笔记][Link 1]
<html>
<head>
<style>
body {
font-family: "Helvetica","Arial",sans-serif;
background-color: #fff;
color: #000;
}
table {
margin: auto; /*元素水平居中*/
border: 1px solid #9cc;
}
caption {
background-color: brown;
color: white;
font-weight: bold;
font-size: 20px;
}
th {
background-color: #9cc;
color: red;
font-style: italic;
font-size: 15px;
}
tr {
border: 1px solid
}
tbody tr:hover {
font-weight: bold
}
td, th {
width: 150px;
padding: 0
}
div {
position: absolute;
left: 50%;
}
h2 {
text-align: center;
}
</style>
<script>
function trColor() {
var _tbody = document.getElementsByTagName("tbody")[0];
var trList = _tbody.children;
//var trList = _tbody.childNodes;
//alert(trList.length);
for (var i = 0; i < trList.length; i++) {
if (i % 2 == 0) {
trList[i].style.backgroundColor = "pink";
}
}
var whereH2 = document.createElement("h2");
var whereText = document.createTextNode("Where");
whereH2.appendChild(whereText);
document.body.appendChild(whereH2);
var abbrList = document.getElementsByTagName("abbr");
//alert(abbrList.length);
var abbrArray = new Array();
for (var i = 0; i < abbrList.length; i++) {
var key = abbrList[i].lastChild.nodeValue;
var value = abbrList[i].getAttribute("title");
//alert(key + " --- " + value);
abbrArray[key] = value;
}
var _div = document.createElement("div");
var dlList = document.createElement("dl");
for (key in abbrArray) {
var _dt = document.createElement("dt");
var dtText = document.createTextNode(key);
_dt.appendChild(dtText);
var _dd = document.createElement("dd");
var ddText = document.createTextNode(abbrArray[key]);
_dd.appendChild(ddText);
dlList.appendChild(_dt);
dlList.appendChild(_dd);
}
_div.appendChild(dlList);
document.body.appendChild(_div);
}
window.onload = trColor;
</script>
</head>
<body>
<table>
<caption>巡视</caption>
<thead>
<tr>
<th>when</th>
<th>where</th>
</tr>
</thead>
<tbody>
<tr>
<td>1949-09-09</td>
<td><abbr title="去厦门旅行">胡建</abbr></td>
</tr>
<tr>
<td>1978-06-13</td>
<td><abbr title="去兰州吃拉面">甘肃</abbr></td>
</tr>
<tr>
<td>1966-11-25</td>
<td><abbr title="去哈尔滨滑哧溜">黑龙江</abbr></td>
</tr>
<tr>
<td>1999-09-12</td>
<td><abbr title="去天津听相声">天津</abbr></td>
</tr>
<tr>
<td>1979-03-04</td>
<td><abbr title="去深圳画圈">广东</abbr></td>
</tr>
</tbody>
</table>
</body>
</html>
还没有评论,来说两句吧...