js改变table标签的背景

最新推荐文章于 2022-06-03 12:04:36 发布

ali19415

最新推荐文章于 2022-06-03 12:04:36 发布

阅读量652

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u013236064/article/details/38441561

版权

javascript 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
	font-family:"Helvetiva","Arial",sans-serif;
	background:#fff;
	color:#000;
}
table {
	margin:auto;
	border:1px solid #699;
}
caption {
	matgin:auto;
	padding:.2em;
	font-size:1.2em;
	font-weight:bold;
}
th {
	font-weight:normal;
	font-style:italic;
	text-align:left;
	border:1px doted #699;
	background-color:#9cc;
	color:#000;
}
th,td {
	width:10em;
	padding:.5em;
}
</style>
<script >
function stripeTables() {
	if(!document.getElementsByTagName) return false;
	var tables = document.getElementsByTagName("table");
	var odd,rows;
	for(var i=0; i<tables.length; i++) {
		odd = false;
		rows = tables[i].getElementsByTagName("tr");
		for(var j=0; j<rows.length; j++) {
			if(odd ==true) {
				rows[j].style.backgroundColor="#ffc";
				odd=false;
			} else {
				odd=ture;
			}
		}
	}
}

stripeTables();
</script>

</head>

<body>

  <table>
    <caption>Itinerary</caption>
    <thead>
    <tr>
      <th>When</th>
      <th>Where</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>June 9th</td>
      <td>Portland,<abbr title="Oregon">OR</abbr></td>
    </tr>
    <tr>
      <td>June 10th</td>
      <td>Seattle,<abbr title="Washington">WA</abbr></td>
    </tr>
    <tr>
      <td>June 12th</td>
      <td>Sacramento,<abbr title="California">CA</abbr></td>
    </tr>
</body>
</html>

书本Page164，pdf打开是Page184

发现无效果，代码核对了好几遍，再看看吧。