`
esffor
  • 浏览: 1353479 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用Javascript动态增加,删除表格(使用W3C对象模型)

阅读更多
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>

<script language="javascript">
  
function deleteRow(index){
    
var tableObj=document.getElementById("mainBody");
    
var rowObj=document.getElementById('row'+index);

    tableObj.removeChild(rowObj);

  }

  
function addRow(){
     
var tableObj=document.getElementById("mytable");
     
var tableBodyObj=document.getElementById("mainBody");
     
var newRowObj=document.createElement("tr");
     newRowObj.id
="row"+(tableObj.rows.length-1);
     
     
var newColName=document.createElement("td");
     
var newColAge=document.createElement("td");
     
var newColButton=document.createElement("td");
     
     newColName.innerHTML
=document.getElementById("newName").value;
     newColAge.innerHTML
=document.getElementById("newAge").value;
     newColButton.innerHTML
='<input type="button" value="删除" onclick="deleteRow('+(tableObj.rows.length-1)+')">'
     
     newRowObj.appendChild(newColName);
     newRowObj.appendChild(newColAge);
     newRowObj.appendChild(newColButton);
     
     tableBodyObj.appendChild(newRowObj);
     
  }

</script>
</head>

<body>
<table width="100%" id="mytable" border="0" cellspacing="0" cellpadding="0">
 
<tbody id="mainBody">
  
<tr>
    
<td>姓名</td>
    
<td>年龄</td>
    
<td>操作</td>
  
</tr>
  
<tr id="row0">
    
<td>gaoxiang</td>
    
<td>28</td>
    
<td><input type="button" onclick="deleteRow(0)" value="删除"/></td>
  
</tr>
   
<tr id="row1">
    
<td>gaoxiang</td>
    
<td>28</td>
    
<td><input type="button" onclick="deleteRow(1)" value="删除"/></td>
  
</tr>
  
</tbody>
</table>

<input type="text" name="name" id="newName" />
<input type="text" name="age" id="newAge"/>
<input type="button" onclick="addRow();"  value="新增"/>
</body>
</html>
 
分享到:
评论

相关推荐

    JavaScript详解(第2版)

    1.9 标准化JavaScript和W3C 11 1.9.1 JavaScript对象 12 1.9.2 文档对象模型 12 1.10 关于浏览器 13 1.10.1 JavaScript的版本 14 1.10.2 你的浏览器遵循标准吗 16 1.10.3 浏览器是否已启用JavaScript ...

    JavaScript王者归来part.1 总数2

     11.3.2.2 showModalDialog和showModelessDialog--非W3C或ECMAScrip标准   11.3.3 状态栏   11.4 框架--上层的Window对象   11.4.1 多框架应用   11.4.2 框架之间的关系   11.4.3 框架的命名   11.4.4 ...

    DOM编程详解(含HTML部分)

    DOM编程详解(含HTML部分)DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范(http://www.w3.org/DOM/),DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件。简单理解,DOM...

    精通javascript

    • 13.6.htm W3C对象模型方法显示和修改表格内容 • 13.7.htm “相对位置”定位 • 13.8.htm “绝对位置”定位 • 13.9.htm z-index属性 • 13.10.htm z-index属性之二 • ...

    精通JavaScript

    • 13.6.htm W3C对象模型方法显示和修改表格内容 • 13.7.htm “相对位置”定位 • 13.8.htm “绝对位置”定位 • 13.9.htm z-index属性 • 13.10.htm z-index属性之二 • ...

    【卷一/共两卷】AJAX实战pdf高清版90M

    4.3.2 W3C事件模型 4.3.3 在JavaScript中实现灵活的事件模型 4.4 Ajax应用中的模型 4.4.1 使用JavaSctjpt为业务领域建模 4.4.2 与服务器交互 4.5 从模型生成视图 4.5.1 JavaScript对象的反射 4.5.2 处理数组和对象 ...

    JavaScript Table行定位效果

    w3c的table部分中说width属性是the desired width of the entire table,我估计entire就是包含了padding和border,找不到什么其他说明,先这么理解吧。 定位方面,除了不支持fixed的ie6用absolute,其他都使用fixed...

    ExtJS(ajax框架) 4.2.1

    相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。 ExtJS(ajax框架) 4.2.1 功能介绍 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,...

    asp.net知识库

    动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/catch语句带来的warning 微软的应试题完整版(附答案) 一个时间转换的问题,顺便谈谈搜索技巧 .net中的正则表达式使用高级技巧 (一) C#静态成员和...

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

    W3C组织正在研究一种名为RDF(Resource Description Framework)的metadata处理方法,可以自动交换信息,W3C宣称,使用RDF配合数字签名,将使网络中存在"真实可信"的电子商务。 六.显示 单独用XMl不能显示页面,...

Global site tag (gtag.js) - Google Analytics