.html代码如下:
.html代码如下:
<html>
<head>
<title>表格单元格对齐</title>
<style type="text/css">
.r1{background:#fba}
.r2{background:#ccc}
</style>
<script type="text/javascript">
function createTable(row,col){
var table = document.createElement("table");//创建table
var body = document.getElementsByTagName("body")[0];//找到body节点
table.border="1";
for(var i = 0 ; i < row ; i++){
var str="我是第"+(i+1)+"行";
var tr = document.createElement("tr");//创建tr
for(var j = 0 ; j < col ; j++){
var td = document.createElement("td");//创建td
td.innerText =str+"第"+(j+1)+"列";
tr.appendChild(td);//td加入tr
}
table.appendChild(tr);//tr加入table
}
body.appendChild(table);//table加入body
changeColor();
}
function changeColor(){
var rows = document.getElementsByTagName("tr");
for(var i = 0 ; i < rows.length ; i++){
if(i % 2 == 0)
rows[i].className="r1";
else
rows[i].className = "r2";
}
}
</script>
</head>
<body οnlοad="createTable(8,6)">
</body>
</html>
效果如下:
下面是动态添加下拉列表框:
.html代码如下:
<html>
<head>
<title>动态下拉列表添加</title>
<script type="text/javascript">
function inertCity(){
var obj = document.getElementById("city");
var option = document.createElement("option");//创建option节点
option.innerText = obj.value;
var parantCity = document.getElementById("cityName");//找到select子节点
parantCity.appendChild(option);
}
</script>
</head>
<body >
<input type="button" value="增加城市" οnclick="inertCity()"/>
<label>请输入添加的城市:</label><input type="text" id="city" />
<select id="cityName">
</select>
</body>
</html>
效果如下: