使用Javascript动态增加，删除表格（使用DHTML对象模型） - esffor - ITeye博客

`

esffor

浏览: 1353475 次
性别:
来自: 北京

最近访客更多访客>>

ymgjava

qq849397558

paladin1988

xieyuncs123

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

2008-02 ( 25)
2008-01 ( 12)
2007-12 ( 103)
更多存档...

最新评论

cyzshenzhen： delaycall.js 修改表单延迟自动提交的 jQuery ...
JS实现根据用户行为延时提交
u010549818： <value>classpath:/my/pack ...
使用Spring的mappingDirectoryLocations来配置Hibernate映射文件
xyswords：撸主不要误导人，尽量不要用inner join，他和where ...
inner join和where区别
shisanshe：我也是这个问题，加了<property name=&qu ...
No CurrentSessionContext configured!" 异常解决方案
zqb666kkk： nice 不错哦
关于BigDecimal.ROUND_HALF_UP与ROUND_HALF_DOWN

使用Javascript动态增加，删除表格（使用DHTML对象模型）

JavaScript HTML

阅读更多

此种方式只能删除表格的最后一行，如果需要删除指定行，需要使用W3C的对象模型，因为每次删除完表格行后，其他使用DHTML对象模型的行的index都会重新变化，也就是说我原来有5行0,1,2,3,4 删除第3行是没有问题的，但删除后原来序号为4的行，就变成3了，使用deleteRow(4)就会报错

<html>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<head>

<script language="javascript">

function deleteRow(index){

var tableObj=document.getElementById("mytable");

tableObj.deleteRow(tableObj.rows.length-1);

}

function addRow(){

var tableObj=document.getElementById("mytable");

var newRowObj=tableObj.insertRow(tableObj.rows.length);

var newColName=newRowObj.insertCell(newRowObj.cells.length);

var newColAge=newRowObj.insertCell(newRowObj.cells.length);

var newColButton=newRowObj.insertCell(newRowObj.cells.length);

newColName.innerHTML=document.getElementById("newName").value;

newColAge.innerHTML=document.getElementById("newAge").value;

newColButton.innerHTML='<input type="button" value="删除" onclick="deleteRow();">';

}

</script>

</head>

<body>

<table width="100%" id="mytable" border="0" cellspacing="0" cellpadding="0">

<tr>

<td>姓名</td>

<td>年龄</td>

<td>操作</td>

</tr>

</table>

<input type="text" name="name" id="newName" />

<input type="text" name="age" id="newAge"/>

<input type="button" onclick="addRow();" value="新增"/>

</body>

</html>

分享到：

使用Javascript动态增加，删除表格（使用W3 ... | JSF分页续

2008-02-01 23:00
浏览 1737
评论(1)
查看更多

评论

1 楼 wuha_yu 2008-06-06

wewr

发表评论

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

相关推荐

JavaScript详解(第2版): 　10.1　JavaScript及浏览器对象模型　　10.1.1　navigator对象的使用　　10.1.2　window对象的使用　　10.1.3　创建定时事件　　10.1.4　Frame的使用　　10.1.5　location对象　　10.1.6　history对象　　...

疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码: 14.7　传统的DHTML模型 467 14.8　使用window对象 469 14.9　navigator和地理定位 479 14.10　HTML 5增强的History API 485 14.11　使用document对象 490 14.12　HTML 5新增的浏览器分析 493 14.13　本章小结 496 第...

《精通Javascript+jQuery》光盘源码: 第1部分　JavaScript.cCSS与DOM基础篇　　第1章　ccJavaScript概述　1.1　JavaScript的起源　1.2　浏览器之争　1.2.1　DHTML 　1.2.2　浏览器之间的冲突　1.2.3　标准的制定　1.3　JavaScript的实现　1.3.1...

精通javascript: • 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象模型方法显示和修改表格内容 • 13.7.htm “相对位置”...

精通JavaScript: • 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象模型方法显示和修改表格内容 • 13.7.htm “相对位置”...

精通JavaScript+jQuery Part1: 　1.2.1　DHTML 　1.2.2　浏览器之间的冲突　1.2.3　标准的制定　1.3　JavaScript的实现　1.3.1　ECMAScript 　1.3.2　DOM 　1.3.3　BOM 　1.3.4　新的开始　1.4　Web标准　1.4.1　Web标准概述　1.4.2...

【卷一/共两卷】AJAX实战pdf高清版90M: 2.4.1 使用JavaScript操作DOM 2.4.2 寻找DOM节点 2.4.3 创建DOM节点 2.4.4 为文档增加样式 2.4.5 捷径：使用innerHTML属性 2.5 使用XML技术异步加载数据 2.5.1 IFrame 2.5.2 XMLDocument和XMLHttpRequest对象 2 5.3 ...

PHP和MySQL Web开发第4版pdf以及源码: 1.4 添加动态内容 1.4.1 调用函数 1.4.2 使用date()函数 1.5 访问表单变量 1.5.1 简短、中等以及长风格的表单变量 1.5.2 字符串的连接 1.5.3 变量和文本 1.6 理解标识符 1.7 检查变量类型 1.7.1 PHP的数据...

PHP和MySQL Web开发第4版: 1.4 添加动态内容 1.4.1 调用函数 1.4.2 使用date()函数 1.5 访问表单变量 1.5.1 简短、中等以及长风格的表单变量 1.5.2 字符串的连接 1.5.3 变量和文本 1.6 理解标识符 1.7 检查变量类型 1.7.1 PHP的数据...

PHP和MySQL WEB开发(第4版): 1.4 添加动态内容 1.4.1 调用函数 1.4.2 使用date()函数 1.5 访问表单变量 1.5.1 简短、中等以及长风格的表单变量 1.5.2 字符串的连接 1.5.3 变量和文本 1.6 理解标识符 1.7 检查变量类型 1.7.1 PHP的数据类型 1.7.2...

java开源包8: JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...

java开源包1: JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...

java开源包11: JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...

java开源包2: JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...

java开源包3: JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...

java开源包6: JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...

java开源包5: JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...

java开源包10: JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...

java开源包4: JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...

java开源包7: JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...

Global site tag (gtag.js) - Google Analytics