javascript:基础教程（三）

最新推荐文章于 2022-11-15 10:41:22 发布

qq_26676207

最新推荐文章于 2022-11-15 10:41:22 发布

阅读量477

点赞数

分类专栏： js

js 专栏收录该内容

53 篇文章 2 订阅

订阅专栏

1、案例一：在末尾添加节点

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div{
		width:200px;
		height:200px;
		border:2px solid red;
	}
  </style>
 </head>
 <body>
 <div>
	<ul id="ulid">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
</div>
<div id="div1">

</div>
	<br/>
	<input type="button" value="add" οnclick="add2();"/>
	<script type="text/javascript">
		function add2() {
			var div1 = document.getElementById("div1");
			var ul1 = document.getElementById("ulid");
			div1.appendChild(ul1);
		}

		//在末尾添加节点
		function add1() {
			//获取到ul标签
			var ul1 = document.getElementById("ulid");
			//创建标签
			var li1 = document.createElement("li");
			//创建文本
			var tex1 = document.createTextNode("5555");
			//把文本加入到li下面
			li1.appendChild(tex1);
			//把li加入到ul下面
			ul1.appendChild(li1);
		}
		
	</script>

 </body>
</html>

第一步：获取到ul标签
第二步：创建li标签
document.createElement("标签名称")方法
第三步：创建文本
document.createTextNode("文本内容");

第四步：把文本添加到li下面
使用 appendChild方法
第五步：把里添加到ul末尾
使用 appendChild方法

2、元素对象（element对象）

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<ul id="ulid1">
		<li>aaaaaa</li>
		<li>bbbbbb</li>
		<li>cccccc</li>
	</ul>

	<script type="text/javascript">
		//获取到ul下面的所有子标签（子元素）
		//获取ul标签
		var ul11 = document.getElementById("ulid1");
		//获取ul下面的子标签
		//var lis = ul11.childNodes;
		//alert(lis.length);
		var lis = ul11.getElementsByTagName("li");
		alert(lis.length);
	</script>

 </body>
</html>

** 要操作element对象，首先必须要获取到element，
- 使用document里面相应的方法获取

** 方法
*** 获取属性里面的值
getAttribute("属性名称")
- var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));

*** 设置属性的值
input1.setAttribute("class","haha");

*** 删除属性
input1.removeAttribute("name");

** 不能删除value

*** 想要获取标签下面的子标签
** 使用属性 childNodes，但是这个属性兼容性很差
** 获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法
- var ul11 = document.getElementById("ulid1");
//获取ul下面的子标签
//var lis = ul11.childNodes;
//alert(lis.length);
var lis = ul11.getElementsByTagName("li");
alert(lis.length);

3、Node对象属性一

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<span id="spanid">哈哈呵呵</span>

	<script type="text/javascript">
		//获取标签对象
		var span1 = document.getElementById("spanid");
		//alert(span1.nodeType);   //  1
		///alert(span1.nodeName);   // SPAN
		///alert(span1.nodeValue);  // null

		//属性
		var id1 = span1.getAttributeNode("id");
		//alert(id1.nodeType);  // 2
		//alert(id1.nodeName);  // id
		//alert(id1.nodeValue); // spanid

		//获取文本
		var text1 = span1.firstChild;
		alert(text1.nodeType);  //  3
		alert(text1.nodeName);  // #text
		alert(text1.nodeValue); // 内容

	</script>

 </body>
</html>

* nodeName
* nodeType
* nodeValue

* 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

* 标签节点对应的值
nodeType： 1
nodeName：大写标签名称比如SPAN
nodeValue: null
* 属性节点对应的值
nodeType： 2
nodeName：属性名称
nodeValue: 属性的值
* 文本节点对应的值
nodeType： 3
nodeName： #text
nodeValue: 文本内容

4、Node对象的属性二

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>

	<ul id="ulid">
		<li id="li1">qqqqq</li>
		<li id="li2">wwww</li>
		<li id="li3">yyyyyy</li>
		<li id="li4">test1111</li>
	</ul>

	<script type="text/javascript">
		
		//得到li1
		/*var li1 = document.getElementById("li1");
		//得到ul
		var ul1 = li1.parentNode;
		alert(ul1.id);*/

		//获取ul的第一个子节点 id=li1
		//得到ul
		var ul1 = document.getElementById("ulid");
		//第一个子节点
		/*var li1 = ul1.firstChild;
		alert(li1.id);*/

		//得到最后一个子节点
		/*var li4 = ul1.lastChild;
		alert(li4.id);*/

		//获取li的id是li3的上一个和下一个兄弟节点
		var li3 = document.getElementById("li3");
		//alert(li3.nextSibling.id);
		alert(li3.previousSibling.id);
		
	</script>

 </body>
</html>

<ul>
<li>qqqqq</li>
<li>wwww</li>
</ul>

* 父节点
- ul是li的父节点
- parentNode
- //得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);

* 子节点
- li是ul的子节点
- childNodes：得到所有子节点，但是兼容性很差

- firstChild：获取第一个子节点
- //获取ul的第一个子节点 id=li1
//得到ul
var ul1 = document.getElementById("ulid");
//第一个子节点
var li1 = ul1.firstChild;
alert(li1.id);
- lastChild：获取最后一个子节点
//得到最后一个子节点
var li4 = ul1.lastChild;
alert(li4.id);

* 同辈节点
- li直接关系是同辈节点
- nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。

- //获取li的id是li3的上一个和下一个兄弟节点
var li3 = document.getElementById("li3");
//alert(li3.nextSibling.id);
alert(li3.previousSibling.id);

5、操作dom树

** appendChild方法
- 添加子节点到末尾
- 特点：类似于剪切黏贴的效果

** insertBefore(newNode,oldNode)方法
- 在某个节点之前插入一个新的节点
- 两个参数
* 要插入的节点
* 在谁之前插入
- 插入一个节点，节点不存在，创建
1、创建标签
2、创建文本
3、把文本添加到标签下面
- 代码
/*
1、获取到li13标签
2、创建li
3、创建文本
4、把文本添加到li下面
5、获取到ul
6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）
*/
//获取li3 标签
var li13 = document.getElementById("li13");
//创建li
var li15 = document.createElement("li");
//创建文本
var text15 = document.createTextNode("董小宛");
//把文本添加到li下面 appendChild
li15.appendChild(text15);
//获取到ul
var ul21 = document.getElementById("ulid21");
//在<li>貂蝉</li>之前添加 <li>董小宛</li>
//insertBefore(newNode,oldNode)
ul21.insertBefore(li15,li13);

*** 不存在没有insertAfter()方法

** removeChild方法：删除节点
- 通过父节点删除，不能自己删除自己
- /*
1、获取到li24标签
2、获取父节点ul标签
3、执行删除（通过父节点删除）
*/
//获取li标签
var li24 = document.getElementById("li24");
//获取父节点
//两种方式 1、通过id获取； 2、通过属性 parentNode获取
var ul31 = document.getElementById("ulid31");
//删除（通过父节点）
ul31.removeChild(li24);

** replaceChild(newNode,oldNode)方法: 替换节点
- 不能自己替换自己，通过父节点替换
- 两个参数
** 第一个参数：新的节点（替换成的节点）
** 第二个参数：旧的节点（被替换的节点）
- 代码
/*
1、获取到li34
2、创建标签li
3、创建文本
4、把文本添加到li下面
5、获取ul标签（父节点）
6、执行替换操作（replaceChild(newNode,oldNode)）
*/
//获取li34
var li34 = document.getElementById("li34");
//创建li
var li35 = document.createElement("li");
//创建文本
var text35 = document.createTextNode("张无忌");
//把文本添加到li下面
li35.appendChild(text35);
//获取ul
var ul41 = document.getElementById("ulid41");
//替换节点
ul41.replaceChild(li35,li34);

** cloneNode(boolean): 复制节点
- //把ul列表复制到另外一个div里面
/*
1、获取到ul
2、执行复制方法 cloneNode方法复制 true
3、把复制之后的内容放到div里面去
** 获取到div
** appendChild方法
*/
//获取ul
var ul41 = document.getElementById("ulid41");
//复制ul，放到类似剪切板里面
var ulcopy = ul41.cloneNode(true)
//获取到div
var divv = document.getElementById("divv");
//把副本放到div里面去
divv.appendChild(ulcopy);

** 操作dom总结
* 获取节点使用方法
getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点
* 插入节点的方法
insertBefore方法：在某个节点之前插入
appendChild方法：在末尾添加，剪切黏贴
* 删除节点方法
removeChild方法：通过父节点删除
* 替换节点方法
replaceChild方法：通过父节点替换

6、innerHTML属性

* 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

第一个作用：获取文本内容
*** //获取span标签
var span1 = document.getElementById("sid");
alert(span1.innerHTML);

第二个作用：向标签里面设置内容（可以是html代码）
*** //向div里面设置内容 <h1>AAAAA</h1>
//获取到div
var div11 = document.getElementById("div11");
//设置内容
div11.innerHTML = "<h1>AAAAA</h1>";

** 练习：向div里面添加一个表格
- //向div里面添加一个表格
//var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";

var tab = "<table>";
tab += "</table>";

//相当于 var tab = "<table></table>";

div11.innerHTML = tab;

7、案例二：动态显示时间

* 得到当前的时间
var date = new Date(); //得到不是常规的格式
var d1 = date.toLocaleString(); //格式化
* 需要让页面每一秒获取时间
setInterval方法定时器
* 显示到页面上
每一秒向div里面写一次时间
* 使用innerHTML属性
* 代码
function getD1() {
//当前时间
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//获取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}

//使用定时器实现每一秒写一次时间
setInterval("getD1();",1000);

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<div id="times">

	</div>
	<script type="text/javascript">
		function getD1() {
			//当前时间
			var date = new Date();
			//格式化
			var d1 = date.toLocaleString();
			//获取div
			var div1 = document.getElementById("times");
			div1.innerHTML = d1;
		}

		//使用定时器实现每一秒写一次时间
		setInterval("getD1();",1000);
		
	</script>

 </body>
</html>

8、案例三：全选练习

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<input type="checkbox" id="boxid" οnclick="selAllNo();"/>全选/全不选
	<br/>
	<input type="checkbox" name="love"/>篮球
	<input type="checkbox" name="love"/>排球
	<input type="checkbox" name="love"/>羽毛球
	<input type="checkbox" name="love"/>乒乓球
	<br/>
	<input type="button" value="全选" οnclick="selAll();"/>
	<input type="button" value="全不选" οnclick="selNo();"/>
	<input type="button" value="反选" οnclick="selOther();"/>
	<script type="text/javascript">
		//实现全选和全不选
		function selAllNo() {
			/*
				1、得到上面那个复选框
					- 通过id获取到
				2、判断这个复选框是否是选中
					- if条件，checked==true
				3、如果是选中，下面是全选
				4、如果不是选中，下面是全不选
			*/
			//得到上面复选框
			var box1 = document.getElementById("boxid");
			//判断这个复选框是否是选择
			if(box1.checked == true) { //是选择状态
				//调用全选方法
				selAll();
			} else { //不是选中状态
				//调用全不选方法
				selNo();
			}
		}

		//实现反选的操作
		function selOther() {
			/*
				1、获取到要操作的复选框
				2、返回数组，遍历数组
				3、得到每一个复选框

				4、判断当前的复选框是选中还是不选中
					- if(love1.checked == true) {}
				5、如果选中，属性checked设置成false，否则，设置成true
			*/
			//获取要操作的复选框
			var loves11 = document.getElementsByName("love");
			//遍历数组
			for(var a=0;a<loves11.length;a++) {
				//得到每一个复选框
				var love11 = loves11[a];
				//判断当前这个复选框是什么状态
				if(love11.checked == true) { //是选中的状态
					//设置checked=false
					love11.checked = false;
				} else { //是不选中的状态
					//把checked=true
					love11.checked = true;
				}
			}
		}

		//实现全不选的操作
		function selNo() {
		
			/*
				1、获取到要操作的复选框
				2、返回的是数组，遍历数组
				3、得到每一个复选框
				4、设置复选框的属性 checked=false
			*/
			//得到要操作的复选框
			var loves1 = document.getElementsByName("love");
			//遍历数组
			for(var j=0;j<loves1.length;j++) {
				//得到每一个复选框
				var love1 = loves1[j];
				//设置属性的值checked = false;
				love1.checked = false;
			}
		}

		//实现全选的操作
		function selAll() {
			/*
				1、获取要操作的复选框 
					- 使用getElementsByName()
				2、返回是数组，
					- 属性 checked判断复选框是否选中
						*** checked = true; //表示选中
						*** checked = false;//表示不选中
					- 遍历数组，得到的是每一个checkbox
						* 把每一个checkbox属性checked=true					
			*/
			//获取要操作的复选框
			var loves = document.getElementsByName("love");
			//遍历数组，得到每一个复选框
			for(var i=0;i<loves.length;i++) {
				var love1 = loves[i]; //得到每一个复选框
				//设置属性是true
				love1.checked = true;
			}
		}
		
	</script>

 </body>
</html>

** 使用复选框上面一个属性判断是否选中
- checked属性
- checked=true：选中
- checked=false：不选中

* 创建一个页面
** 复选框和按钮
- 四个复选框表示爱好
- 还有一个复选框操作全选和选不选，也有一个事件

** 三个按钮，分别有事件
- 全选
- 全不选
- 反选
* 全选操作
步骤：
/*
1、获取要操作的复选框
- 使用getElementsByName()
2、返回是数组，
- 属性 checked判断复选框是否选中
*** checked = true; //表示选中
*** checked = false;//表示不选中
- 遍历数组，得到的是每一个checkbox
* 把每一个checkbox属性checked=true
*/

* 全不选操作
步骤
/*
1、获取到要操作的复选框
2、返回的是数组，遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked=false
*/

* 反选操作
步骤
/*
1、获取到要操作的复选框
2、返回数组，遍历数组
3、得到每一个复选框

4、判断当前的复选框是选中还是不选中
- if(love1.checked == true) {}
5、如果选中，属性checked设置成false，否则，设置成true
*/

* 使用复选框实现全选和全不选
步骤
/*
1、得到上面那个复选框
- 通过id获取到
2、判断这个复选框是否是选中
- if条件，checked==true
3、如果是选中，下面是全选
4、如果不是选中，下面是全不选
*/

9、案例四：下拉列表左右选择

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	
<div id="s1" style="float:left;">
		<div>
	<select id="select1" multiple="multiple" style="width:100px;height:100px;">
		<option>AAAAAAAA</option>
		<option>BBBBBBBB</option>
		<option>CCCCCCCC</option>
		<option>DDDDDDDD</option>
		<option>EEEEEEEE</option>
	</select>
	</div>


	<div>
	<input type="button" value="选中添加到右边" οnclick="selToRight();"/><br/>
	<input type="button" value="全部添加到右边" οnclick="allToRight();"/>
	</div>
</div>

<div id="s2">
		<div>
	<select id="select2" multiple="multiple" style="width:100px;height:100px;">
		<option>QQQQQQQQ</option>
	</select>
	</div>

	<div>
	<input type="button" value="选中添加到左边" οnclick="selToLeft();"/><br/>
	<input type="button" value="全部添加到左边" οnclick="allToLeft();"/>
	</div>
</div>

	<script type="text/javascript">

		//实现全部添加到左边
		function allToLeft() {
			/*
				1、获取select2里面的option对象
				2、返回是数组，遍历数组
				3、得到每一个option对象

				4、获取到select1
				5、添加到select1里面
					- 使用appendChild方法
			*/
			//获取select2
			var select2 = document.getElementById("select2");
			//获取select1
			var select1 = document.getElementById("select1");
			//获取select2里面的option
			var options1 = select2.getElementsByTagName("option");
			//遍历数组
			for(var m=0;m<options1.length;m++){
				//得到每一个option
				var op11 = options1[m];
				//添加到select1里面
				select1.appendChild(op11);
				m--;
			}
		}

		//选择添加到左边
		function selToLeft() {
			/*
				1、获取select2里面的option对象
				2、返回是数组，遍历数组
				3、得到每一个option对象
				4、判断option是否被选中
					- if条件 属性 selected == true：选择
				5、获取select1
				6、添加到select1里面
					- 使用appendChild方法
			*/
			//获取select1
			var s1 = document.getElementById("select1");
			//获取到select2
			var s2 = document.getElementById("select2");
			//得到s1里面的option对象
			var opss = s2.getElementsByTagName("option");
			//遍历数组
			for(var aa=0;aa<opss.length;aa++) {
				//得到每一个option
				var op = opss[aa];
				//判断是否被选中
				if(op.selected == true) { //被选中
					//添加到select1里面
					s1.appendChild(op);
					aa--;
				}
			}
		}

		//全部添加到右边
		function allToRight() {
			/*
				1、获取第一个select下面的option对象
				2、返回数组，遍历数组
				3、得到每一个option对象
				4、得到select2
				5、添加到select2下面
					- appendChild方法
			*/
			//得到select2
			var s2 = document.getElementById("select2");
			//得到select下面的option对象
			var s1 = document.getElementById("select1");
			var ops = s1.getElementsByTagName("option");//返回的是数组
			//遍历数组
			for(var j=0;j<ops.length;j++) {
				//得到每一个option对象
				var op1 = ops[j];
				//添加option到s2下面
				s2.appendChild(op1);
				j--;
			}
		}

		//实现选中添加到右边
		function selToRight() {
			/*
				1、获取select1里面的option
					- getElementsByTagName()返回是数组
					- 遍历数组，得到每一个option
				2、判断option是否被选中
					- 属性 selected，判断是否被选中
						** selected= true: 选中
						** selected= false：没有选择
				3、如果是选中，把选择的添加到右边去
				4、得到select2
				4、添加选择的部分
					- appendChild方法
			*/
			//获取select1里面的option
			//获取select2
			var select2 = document.getElementById("select2");
			//得到select1
			var select1 = document.getElementById("select1");
			//得到option
			var options1 = select1.getElementsByTagName("option");
			//遍历数组
			for(var i=0;i<options1.length;i++) {
				//alert(i);
				//第一次循环 i=0  length：5   
				//第二次循环 i=0  length：4   
				//           i=0  length: 3
				var option1 = options1[i];//得到每一个option对象
				//判断是否被选中
				if(option1.selected == true) {
					//添加到select2里面
					select2.appendChild(option1);
					i--;
				}
			}

		}
		
	</script>

 </body>
</html>

* 下拉选择框
<select>
<option>111</option>
<option>111</option>
</select>

* 创建一个页面
** 两个下拉选择框
- 设置属性 multiple属性
** 四个按钮，有事件

* 选中添加到右边
步骤
/*
1、获取select1里面的option
- getElementsByTagName()返回是数组
- 遍历数组，得到每一个option
2、判断option是否被选中
- 属性 selected，判断是否被选中
** selected= true: 选中
** selected= false：没有选择
3、如果是选中，把选择的添加到右边去
4、得到select2
4、添加选择的部分
- appendChild方法
*/

* 全部添加到右边
步骤
/*
1、获取第一个select下面的option对象
2、返回数组，遍历数组
3、得到每一个option对象
4、得到select2
5、添加到select2下面
- appendChild方法
*/

* 选中添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、判断option是否被选中
- if条件属性 selected == true：选择
5、获取select1
6、添加到select1里面
- 使用appendChild方法
*/

* 全部添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象

4、获取到select1
5、添加到select1里面
- 使用appendChild方法
*/

10、案例五：省市联动

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<select id="countryid" οnchange="add1(this.value);">
		<option value="0">--请选择--</option>
		<option value="中国">中国</option>
		<option value="美国">美国</option>
		<option value="德国">德国</option>
		<option value="日本">日本</option>
	</select>

	<select id="cityid">
			
	</select>

 </body>
 	<script type="text/javascript">
		
		//创建一个数组存储数据
		//二维数组
		var arr = new Array(4);
		arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];
		arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];
		arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];
		arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];

		function add1(val) {
			//alert(val);
			/*
				1、遍历二维数组
				2、得到也是一个数组（国家对于关系）

				3、拿到数组中的第一个值和传递过来的值做比较
				4、如果相同，获取到第一个值后面的元素
				5、得到city的select
				6、添加过去（使用）appendChild方法
					- 创建option（三步）
			*/

			/*
				由于每次都要想city里面添加option
				第二次添加，追加
				* 每次添加之前，判断一下city里面是否有option，如果有，删除
			*/

			//获取city的select
			var city1 = document.getElementById("cityid");
			//得到city里面的option
			var options1 = city1.getElementsByTagName("option");
			//遍历数组
			for(var m=0;m<options1.length;m++) {
				//得到每一个option
				var op = options1[m];
				//删除这个option 通过父节点删除
				city1.removeChild(op);
				m--;
			}

			//遍历二维数组
			for(var i=0;i<arr.length;i++) {
				//得到二维数组里面的每一个数组
				var arr1 = arr[i];
				//得到遍历之后的数组的第一个值
				var firstvalue = arr1[0];
				//判断传递过来的值和第一个值是否相同
				if(firstvalue == val) { //相同
					//得到第一个值后面的元素
					//遍历arr1
					for(var j=1;j<arr1.length;j++) {
						var value1 = arr1[j]; //得到城市的名称
						//alert(value1);
						//创建option
						var option1 = document.createElement("option");
						//创建文本
						var text1 = document.createTextNode(value1);
						//把文本添加到option1里面
						option1.appendChild(text1);
						//添加值到city1里面
						city1.appendChild(option1);
					}
				}

			}
		}
		
	</script>
</html>

* 创建一个页面，有两个下拉选择框
* 在第一个下拉框里面有一个事件：改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
* 创建一个二维数组，存储数据
* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
　　　　*
/*
1、遍历二维数组
2、得到也是一个数组（国家对应关系）

3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同，获取到第一个值后面的元素
5、得到city的select
6、添加过去（使用）appendChild方法
- 创建option（三步）
*/

/*
由于每次都要向city里面添加option
第二次添加，会追加。

* 每次添加之前，判断一下city里面是否有option，如果有，删除
*/

11、案例六：动态生成表格

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	行：<input type="text" id="h" />
	列：<input type="text" id="l" />
	<br/>
	<input type="button" value="生成" οnclick="add2();"/>

	<div id="divv">

	</div>
	<script type="text/javascript">
		
		function add2() {
		
			/*
				1、得到输入的行和列的值
				2、生成表格
					** 循环行
					** 在行里面循环单元格
				3、显示到页面上
					- 把表格的代码设置到div里面
					- 使用innerHTML属性
			*/
			//获取输入的行和列
			var h = document.getElementById("h").value;
			var l = document.getElementById("l").value;

			//把表格代码放到一个变量里面
			var tab = "<table border='1' bordercolor='blue'>";
			//循环行
			for(var i=1;i<=h;i++) {
				tab += "<tr>";
				//循环单元格
				for(var j=1;j<=l;j++) {
					tab += "<td>aaaaaaa</td>"
				}
				tab += "</tr>";
			}

			tab += "</table>";

			//alert(tab);
			//得到div标签
			var divv = document.getElementById("divv");
			//把table的代码设置到div里面去
			divv.innerHTML = tab;
		}
		
	</script>

 </body>
</html>

*创建一个页面：两个输入框和一个按钮

*代码和步骤
/*
1、得到输入的行和列的值
2、生成表格
** 循环行
** 在行里面循环单元格
3、显示到页面上
- 把表格的代码设置到div里面
- 使用innerHTML属性
*/
//获取输入的行和列
var h = document.getElementById("h").value;
var l = document.getElementById("l").value;

//把表格代码放到一个变量里面
var tab = "<table border='1' bordercolor='blue'>";
//循环行
for(var i=1;i<=h;i++) {
tab += "<tr>";
//循环单元格
for(var j=1;j<=l;j++) {
tab += "<td>aaaaaaa</td>"
}
tab += "</tr>";
}

tab += "</table>";

//alert(tab);
//得到div标签
var divv = document.getElementById("divv");
//把table的代码设置到div里面去
divv.innerHTML = tab;
}