使用JavaScript和DOM创建HTML页面 -

bijian1013

浏览: 3227856 次
性别:
来自: 深圳

最近访客更多访客>>

dy.f

godandghost

lovefiger

marsgrayson

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

使用JavaScript和DOM创建HTML页面

博客分类：

JavaScript

javaScript dom html table

一.使用JavaScript和DOM创建HTML表格

1.代码

<html>
	<head>
		<title>使用JavaScript和DOM创建HTML表格</title>
	</head>
	<body>
		<div id="tableTest">
		</div>
	</body>
</html>
<script language="JavaScript" type="text/javascript">
	<!--
	//获取容器div的引用
	var container=document.getElementById("tableTest");
	//创建表格对象
	var _table=document.createElement("table");
	//设置表格属性
	_table.setAttribute("border","1");
	_table.setAttribute("borderColor","black");
	_table.setAttribute("width","200");
	//创建5行
	for(var i=0;i<5;i++){
	 var _tr=_table.insertRow(i);
	 //创建4列
	 for(var j=0;j<4;j++){
	  var _td=_tr.insertCell(j);
	  var _tn=document.createTextNode(i.toString()+j.toString());
	  _td.appendChild(_tn);
	 }
	}
	//将表格显示于页面
	container.appendChild(_table);
	//-->
</script>

2.运行效果

二.使用JavaScript和DOM创建HTML单选按钮

1.代码

<html>
	<head>
		<title>使用JavaScript和DOM创建HTML单选按钮</title>
	</head>
	<body>
		<form id="f1">
			<span id="radioArea">Sign</span>
		</form>
		<input type="button" value="creatTestRadioButtons" onclick="creatTestRadioButtons();" />
	</body>
	<script>
		function createRadioButtonsToSpan(dataArr, radioName, targetSpanId){
		  var targetSpan = document.getElementById(targetSpanId);
		  for (var i = 0; i < dataArr.length; i++){
		    var val = dataArr[i];
		    var input = createElement("input", radioName);
		    input.setAttribute("type", "radio");
		    input.setAttribute("value", val);
		    targetSpan.appendChild(input);
		
		    var label = document.createElement("label");
		    label.setAttribute("for", radioName);
		    label.appendChild(document.createTextNode(val));
		    targetSpan.appendChild(label);
		  }
		}
		
		function createElement(type, name){
		  var element = null;
		  try{
		    // if IE
		    element = document.createElement('<' + type + ' name="' + name + '">');
		  }
		  catch (e){}
		  if (!element){
		    //if other
		    element = document.createElement(type);
		    element.name = name;
		  }
		  return element;
		}
		
		function creatTestRadioButtons(){
		  var arr = new Array();
		  arr[0] = 5;
		  arr[1] = 6;
		  arr[2] = 7;
		  createRadioButtonsToSpan(arr, "rnap", "radioArea");
		}
	</script>
</html>

2.运行效果