DOM-动态创建表格和动态添加下拉列表框实例

来源：互联网发布：淘宝日语编辑：程序博客网时间：2024/06/07 07:20

.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");//创建tablevar 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");//创建tdtd.innerText =str+"第"+(j+1)+"列";tr.appendChild(td);//td加入tr}table.appendChild(tr);//tr加入table}body.appendChild(table);//table加入bodychangeColor();}function changeColor(){var rows = document.getElementsByTagName("tr");for(var i = 0 ; i < rows.length ; i++){if(i % 2 == 0)rows[i].className="r1";elserows[i].className = "r2";}}</script></head><body onload="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="增加城市" onclick="inertCity()"/><label>请输入添加的城市：</label><input type="text" id="city" /><select id="cityName"></select></body></html>

效果如下：

0 0