javascript常用技巧

最新推荐文章于 2024-07-25 23:30:19 发布

风云正

最新推荐文章于 2024-07-25 23:30:19 发布

阅读量91

点赞数

分类专栏： web 文章标签： javascript 技巧 ViewUI

本文链接：https://blog.csdn.net/chenzheng8975/article/details/84373900

版权

web 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

实例一：

<html>
<head><title>www.gaoxingbo.cn</title>
	<script language="javaScript">
		function show(){
			document.getElementById("info").innerHTML="<H2>www.gaoxingbo.cn</h2>";
		}
	</script>
</head>
<body>
	<form action="" method="post">
			<input type="button" value="显示" οnclick="show()">
			<span id="info"></span>
	</form>
<body>
</html>

实例二：

<html>
<head><title>www.gaoxingbo.cn</title>
	<script language="javaScript">
		function setFun(){
			var id=new Array(1,2,3);
			var value=new Array("北京","天津","上海");
			//取得下拉列表框的对象
			var select=document.getElementById("area");
			select.length=1;
			select.options[0].selected="true";	//设置第一个为默认选中
			for(var x=0;x<id.length;x++){
				//创建option的节点
				var option=document.createElement("option");
				//在option子节点之中增加属性
				option.setAttribute("value",id[x]);
				//在option子节点中增加文本节点
				option.appendChild(document.createTextNode(value[x]));
				select.appendChild(option);	//增加子节点
				
			}
		}
	</script>
</head>
<body οnlοad="setFun()">
	<form>
		<select name="area" id="area">
			<option value="0">没有地区</option>
		</select>
	</form>
<body>
</html>

实例三：

在JavaScript之中本身已经直接提供了表格的操作函数:
insertRow():增加表格行；
deleteCell():删除单元格，列；
insertCell():插入一个列。

<html>
<head><title>www.gaoxingbo.cn</title>
	<script language="javaScript">
		function deleterow(btn){
			var tr=btn.parentNode.parentNode;
			var table=document.getElementById("mytab");
			table.deleteRow(tr.rowIndex);
		}
		var count=3;
		function addrow(){
			var table=document.getElementById("mytab");
			var tr=table.insertRow();
			var td1=tr.insertCell();
			var td2=tr.insertCell();
			var td3=tr.insertCell();
			
			td1.innerHTML="gaoxingbo-"+count;
			td1.setAttribute("align","center");
			td2.innerHTML="高兴波-"+count;
			td2.setAttribute("align","center");
			td3.innerHTML="<input type='button' value='删除' οnclick='deleterow(this)'>";
			td3.setAttribute("align","center");
			count++;
			
		}
	</script>
</head>
<body >
	<table id="mytab" width="80%" border="1">
		<tr>
			<td align="center">gaoxingbo-1</td>
			<td align="center">高兴波-1</td>
			<td align="center"><input type="button" value="删除" οnclick="deleterow(this)"></td>
		</tr>
		<tr>
			<td align="center">xiaowangzi-2</td>
			<td align="center">小王子-2</td>
			<td align="center"><input type="button" value="删除" οnclick="deleterow(this)"></td>
		</tr>
		
	</table>
	<td colspan="3" align="center"><input type="button" value="增加" οnclick="addrow()"</td>
<body>
</html>

实例四：

在<table>和<tr>元素之间还存在一个<tbody>

<html>
<head><title>www.gaoxingbo.cn</title>
	<script language="javaScript">
		var count=1;
		function addrow(){
			var table=document.getElementById("mytab");
			var id=document.getElementById("id").value;
			var name=document.getElementById("name").value;
			var tr=document.createElement("tr");
			var tbody=document.createElement("tbody");
			var td_id=document.createElement("td");
			var td_name=document.createElement("td");
			var td_btn=document.createElement("td");
			td_id.appendChild(document.createTextNode(id+"——"+count));
			td_id.setAttribute("align","center");
			td_name.appendChild(document.createTextNode(name+"——"+count));
			td_name.setAttribute("align","center");
			td_btn.innerHTML="<input type='button' value='删除' οnclick='deleterow(this)'>";
			td_btn.setAttribute("align","center");
			tr.appendChild(td_id);
			tr.appendChild(td_name);
			tr.appendChild(td_btn);
			tbody.appendChild(tr);
			table.appendChild(tbody);
			count++;
		}
		function deleterow(btn){
			var tr=btn.parentNode.parentNode;
			var table=document.getElementById("mytab");
			table.deleteRow(tr.rowIndex);
			count--;
		}
	</script>
</head>
<body >
	新的编号：<input type="text" name="id"><br>
	新的姓名：<input type="text" name="name"><br>
	<input type="button" value="增加" οnclick="addrow()">
	<table id="mytab" width="500px" border="1" align="center">
		<tr>
			<td align="center">编号</td>
			<td align="center">姓名</td>
			<td align="center">&nbsp;</td>
		</tr>
	</table>
	
<body>
</html>