生成Table,然后赋值

主要用于需要对比的时候:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>生成Table</title>
<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:12px;
	margin:3px;
}
#mainTable{
	width:100%;
	border-collapse:collapse;
}
#mainTable td{
	height:25px;
	padding:0 5px;
	border:1px solid #A9C9E2;
	overflow:hidden;
}
.title{
	 width:100px;
	 font-size:14px;
	 color:#cc0000;
	 background:#FFF5FA;
	 padding-right:5px;
	 text-align:right;
}
.rowOdd{
	text-align: left;
	padding-left:5px;
	background:#fefefe;
}
.rowEven{
	text-align: left;
	padding-left:5px;
	background:#F1F7F9;
}
</style>
</head>

<body onload="initTable('rent')">
  <!-- 显示table -->
  <table border="0" cellpadding="0" cellspacing="0" id="mainTable" >
  </table>
<script type="text/javascript">
var rentArr = ['1','2','3','4','5','6'];
function initTable(type){
	var arr = rentArr;
	var table = document.getElementById("mainTable");
	var rows = table.rows;
	var rowLen = rows.length;
	var arrLen = arr.length;
	var newRow ;
	var newCell ;
	var columnNum = 4;
	var trClass;
	for(i=0;i<arrLen;i++){
	  newRow = table.insertRow(rowLen+i);
	  trClass = (i%2==0)?"rowOdd":"rowEven";
	  for(j=0;j<columnNum;j++){
	  	newCell = newRow.insertCell(j);
		if(j==0){
			newCell.innerHTML = "标题";
			newCell.className = "title";
		}else{
			newCell.innerHTML = i+","+j ;
			newCell.title = i+","+j ;
			newCell.className = trClass;
		}
	  }
	}
}
</script>
</body>
</html>

 

你可能感兴趣的:(JavaScript,html,css,J#)