`

DOM模型动态改变Element的值

阅读更多

动态改变表格的值,下拉的值等

下面就是一个简单的动态改变表格的值的一个例子:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>改变表格值</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<script type="text/javascript">
   		function change(){
   			var tb = document.getElementById("d");
   			var row = document.getElementById("row");
   			row = parseInt(row.value);
   			//要是输入的不是整数
   			if(isNaN(row)){
   				alert("你要修改的行必须是整数");
   				return false;
   			}
   			var cel = document.getElementById("cel");
   			cel = parseInt(cel.value);
   			//要是输入的不是整数
   			if(isNaN(cel)){
   				alert("你要修改的列必须是整数");
   				return false;
   			}
   			//要是输入的行或列超出表格的行或列
   			if(row>tb.rows.length || cel>tb.rows.item(0).cells.length){
   				alert("要修改的单元格不再该表格内");
   				return false;
   			}
   			var celValue = document.getElementById("value").value;
   			if(celValue==""){
   				alert("请输入要改变的值");
   				return false;
   			}
   			tb.rows.item(row-1).cells.item(cel-1).innerHTML = celValue;
   		}	
   		</script>
	</head>

	<body>
		改变第
		<input id="row" type="text" size="2" />
		行, 第
		<input id="cel" type="text" size="2" />
		列的值为:
		<input id="value" type="text" size="16" />
		<br>
		<input id="change" type="button" value="改变" onclick="change();" />
		<table id="d" border="1">
			<tr>
				<td>
					JAVA
				</td>
				<td>
					Struts2
				</td>
			</tr>
			<tr>
				<td>
					Ajax
				</td>
				<td>
					JAVA EE
				</td>
			</tr>
			<tr>
				<td>
					XML
				</td>
				<td>
					JSP/Servlet
				</td>
			</tr>
		</table>

	</body>
</html>
 

分享到:
评论

相关推荐

    txt的意思,来源与实例

    每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM对象,动态改变页面 的内容,正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象 )仅仅有DOM是...

    【学习笔记】:DOM对象及事件绑定

    文章目录一、DOM的概念二、DHTML与HTML DOM三、Document对象获取元素方法四、Element对象与属性相关方法五、对DOM对象的操作1、DOM对象的属性2、创建元素3、挂载元素4、删除元素5、克隆元素六、调整元素样式的方式七...

    day023-xml解析笔记和代码.rar

    element.setText("标签值"); 6. 给当前标签添加属性:xxx ,值是:xxx Element attribute = linkman.addAttribute("属性名","值"); 通过属性对象attribute获取属性值 attribute....

    javascript完全学习手册2 源码

    6.3.3 Element接口 6.3.4 Text接口和Attr接口 6.4 操作HTML文档 6.4.1 访问元素 6.4..2 添加节点 6.4.3 删除节点 6.4.4 对属性进行操作 第3篇 JavaScript高级编程篇 第7章 正则表达式 7.1 正则...

    EXTJS总结.txt

    第二个参数是插入HTML片断,第三个参数是决定是否返回一个Ext.Element类型的DOM对象。 Ext.fly('elId').insertHtml( 'beforeBegin', '&lt;p&gt;&lt;a href="anotherpage.html'&gt;点击我&lt;/a&gt;&lt;/p&gt;' ); // 返回dom节点 Ext....

    xml入门教程/xml入门教程

    属性:由“=”分隔的成对的属性名和属性值构成,只能出现在元素标记的内部。 结束标记不能带属性,一个元素可以具有多个属性 语法:&lt;!ATTLIST 对应的元素名 属性名 属性取值类型 属性默认值&gt; 属性取值类型 1...

    javascript完全学习手册1 源码

    6.3.3 Element接口 134 6.3.4 Text接口和Attr接口 136 6.4 操作HTML文档 138 6.4.1 访问元素 138 6.4.2 添加节点 140 6.4.3 删除节点 142 6.4.4 对属性进行操作 146 第3篇 JavaScript高级编程篇 第7章 正则表达式 ...

    大名鼎鼎SWFUpload- Flash+JS 上传

     动态修改SWFUpload初始化设置中的post_params属性,其中所有的值都将被覆盖。  - 参数  param_object:一个simple JavaScript object,所有的name/value都必须是字符串,例如(this.setPostParams({ "Mari": name...

    JavaScript基础和实例代码

    JavaScript电子书,包括了JavaScript的大部分知识,...8.2.2 设置文档颜色值 8.2.3 往文档写入新内容 8.2.4 常见属性和方法汇总 8.3 body元素对象 8.3.1 获取body元素对象信息 8.3.2 常见属性和方法汇总 8.4 本章小结

    源文件程序天下JAVASCRIPT实例自学手册

    源文件程序天下JAVASCRIPT实例自学手册 ...8.2.2 设置文档颜色值 8.2.3 往文档写入新内容 8.2.4 常见属性和方法汇总 8.3 body元素对象 8.3.1 获取body元素对象信息 8.3.2 常见属性和方法汇总 8.4 本章小结

    编译的 HTML 帮助文件 (.chm) DHTML手册

    XMLDocument 获取对由对象引出的的 XML 文档对象模型(DOM)的引用。 XSLDocument 获取对 XSL 文档的顶层结点的引用。 属性 集合 集合 描述 all 返回对象所包含的元素集合的引用。 anchors 获取所有带有 ...

    Ext Js权威指南(.zip.001

    6.2 获取单一元素:ext.dom.element / 252 6.2.1 从错误开始 / 252 6.2.2 使用ext.get获取元素 / 253 6.2.3 使用ext.fly获取元素 / 256 6.2.4 使用ext.getdom获取元素 / 257 6.2.5 获取元素的总结 / 258 6.3 ...

    Ext+JS高级程序设计.rar

    14.5 系统主页面与动态菜单 421 14.6 用户管理模块 427 14.7 角色管理模块 439 14.8 产品管理模块 447 14.9 进仓管理模块 450 14.10 出仓管理模块 460 14.11 库存统计模块 474 14.12 用户修改密码窗口 479 14.13 ...

    JavaScript Table行定位效果

    只要给table设置width(style或本身的width属性),不管设置padding和border是多少,offsetWidth都等于width的值。 经测量offsetWidth是没错的,那就是说是table的width设置的问题。 w3c的table部分中说width属性是...

    Tinyxml 源代码(VC6 & VS2005)

    如果想要改变默认行为,你应该在解析任何XML数据之前调用TiXmlBase::SetCondenseWhiteSpace( bool ) ,而且我不建议设置之后再去改动它。 句柄 想要健壮地读取一个XML文档,检查方法调用后的返回值是否为null是很...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    DOM全称是document object model(文档对象模型),DOM是用来干什么的呢?假设把你的文档看成一个单独的对象,DOM就是如何用HTML或者XML对这个对象进行操作和控制的标准。 面向对象的思想方法已经非常流行了,在编程...

Global site tag (gtag.js) - Google Analytics