`

javascript常用技巧

    博客分类：
  • web
javascript技巧 
阅读更多

实例一： 

<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="显示" onclick="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 onload="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='删除' onclick='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="删除" onclick="deleterow(this)"></td>
		</tr>
		<tr>
			<td align="center">xiaowangzi-2</td>
			<td align="center">小王子-2</td>
			<td align="center"><input type="button" value="删除" onclick="deleterow(this)"></td>
		</tr>
		
	</table>
	<td colspan="3" align="center"><input type="button" value="增加" onclick="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='删除' onclick='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="增加" onclick="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>

 

分享到：
| xml解析之DOM4J
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript 常用 技巧.rar

    JavaScript是一种广泛应用于网页和网络...以上只是部分JavaScript常用技巧的概述，实际的压缩包资源可能包含了更具体的示例和代码片段，通过学习和实践这些技巧，你将能够编写出更高效、更易于维护的JavaScript代码。

    Javascript常用技巧总结

    ### JavaScript 常用技巧总结 #### 一、禁用右键菜单与文本选择 **技巧1：** 禁止浏览器默认的右键菜单显示。 ```javascript oncontextmenu="window.event.returnValue=false" ``` 或者针对表格元素： ```html ;...

    JavaScript常用技巧

    以下是一些JavaScript常用技巧的详细说明： 1. **事件源对象**：`event.srcElement` 是一个对象，代表触发事件的元素。你可以通过`.tagName`获取元素的标签名，如`event.srcElement.tagName`，而`.type`则可以获取...

    Javascript常用技巧

    总的来说，JavaScript的这些常用技巧涵盖了基本的DOM操作、事件处理以及文本格式化。对于新手而言，理解和掌握这些技巧能够极大地提高开发效率。然而，对于经验丰富的JavaScript开发者，这些可能只是基础知识，他们...

    JavaScript常用55个技巧

    ### JavaScript常用技巧详解 在网页开发领域，JavaScript作为前端开发的核心语言之一，其灵活与强大功能使其成为构建交互式网站的必备技能。以下是从“JavaScript常用55个技巧”中精选出的部分技巧，旨在帮助开发者...

    javascript常用大全

    javascript常用方法，javascript常用判断，javascript实用命令，javascript常用函数集，javascript常用55个技巧，javascript深度剖析，107个常用的javascript语句.

    Javascript中最常用的55个经典技巧

    ### JavaScript中最常用的55个经典技巧详解 #### 技巧一：禁用右键菜单 在网页开发过程中，有时为了...以上是部分JavaScript常用技巧的详细介绍，通过这些技巧，开发者可以在Web开发过程中更好地控制和优化用户体验。

    javascript50个常用或者有用

    以上只是JavaScript常用技巧的一部分，实际上JavaScript的功能远不止这些。深入学习JavaScript的DOM操作、AJAX请求、定时器、函数、对象等概念，以及ES6及以后的新特性，将有助于成为一个更全面的前端开发者。不断...

    javascript常用操作技巧

    本文将基于提供的文件信息，深入解析一系列JavaScript常用操作技巧及其应用场景。 #### 1. 屏蔽鼠标右键 - **代码示例**： ```javascript oncontextmenu="window.event.returnValue=false" ``` - **解释**：...

    Javascript常用小技巧

    以下是一些JavaScript的常用小技巧，可以帮助开发者提高效率，优化网页功能。 1. **禁用鼠标右键**：通过`oncontextmenu="window.event.returnValue=false"`可以禁止用户在网页上点击鼠标右键，通常用于防止用户...

    javascript常用效果大全

    ### JavaScript常用效果大全 #### 1. 弹窗选择用户功能 ```javascript function doSelectUser(txtId) { var strFeatures = "dialogWidth=500px;dialogHeight=360px;center=yes;middle=yes;help=no;status=no;...

    常用javascript小技巧

    ### 常用JavaScript小技巧详解 在前端开发领域，JavaScript是不可或缺的编程语言，它提供了丰富的功能和灵活的语法，让开发者能够构建交互式的网页应用。以下是对给定文件中提到的一些常用JavaScript小技巧的深入...

    JavaScript中一些常用的小技巧

    在JavaScript编程中，掌握一些常用的小技巧可以极大地提高开发效率和代码质量。以下是一些从网络上整合的实用技巧，特别适合初学者学习。 1. 事件源对象：`event.srcElement` 可以获取触发事件的元素，而 `event....

    常用的Javascript技巧大集合

    常用事件处理技巧 #### 1.1 失去焦点事件 (`onblur`) 在HTML表单中，`onblur` 事件会在输入框失去焦点时触发。可以通过此事件来执行一些逻辑操作，比如验证用户输入是否为空。 **示例代码：** ```html 请输入...

    JS技巧——日常常用JAVASCRIPT脚本

    本文将深入探讨一些日常常用的JavaScript脚本技巧。 1. **变量声明与类型转换**： - `var`, `let` 和 `const`：在ES6中，我们有了新的变量声明方式。`var` 是传统的全局或局部变量，而 `let` 和 `const` 是块级...

Magicbox
Global site tag (gtag.js) - Google Analytics