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

最新推荐文章于 2023-05-22 02:52:59 发布

yayun0516

最新推荐文章于 2023-05-22 02:52:59 发布

阅读量3.2k

点赞数

分类专栏： javaScript 文章标签： dom javascript .appendChild .createElement .getElementsByTagNam

本文链接：https://blog.csdn.net/yayun0516/article/details/41594497

版权

javaScript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

.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>

效果如下：

yayun0516

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM-动态创建表格和动态添加下拉列表框实例

.html代码如下：表格单元格对齐 .r1{background:#fba} .r2{background:#ccc} function createTable(row,col){ var table = document.createElement("table");//创建table var body = document.get
复制链接

扫一扫