使用JavaScript动态增加或删除表格的行与列 - Event driven - ITeye博客

`

geeksun

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

最近访客更多访客>>

尘与飞

poppinhai

PROFANS

zy17655015

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

菜鸟学生会： Spring与dubbo分布式REST服务开发实战网盘地址：h ...
Dubbo与Spring的配合使用
奔跑的码侬：基于 Spring + Dubbo 开发分布式REST服务实战 ...
Dubbo与Spring的配合使用
卧槽这是我的昵称麽： ...
MyBatis的parameterType和resultMap
xiongzhe90：学习中，赞一个
idea14使用maven创建web工程
zqb666kkk： nice 非常好！
jquery form向spring mvc提交表单

使用JavaScript动态增加或删除表格的行与列

博客分类：

web&js

JavaScript HTML Blog

阅读更多

对于新增，可以使用insertRow函
对于删除，有两种方式：
1. 得到要删除的行在table中的序号rowindex,之后用table.deleteRow(rowindex)
2. 得到要删除的行, 之后tr.parentNode.removeChild(tr)

下面是一个demo

<HTML>
 <HEAD>
 <script language="javascript">
  var i=-1;
  function add(){
     i=i+1;
     var table=document.getElementById("table");
	 var row=table.insertRow();
	 var cell=row.insertCell();
	 cell.parentElement.id=i;
	 cell.innerHTML="数据源:<input type=\"text\" value=\""+i+"\"/>&nbsp;数据源:<input type=\"text\" value=\""+i+"\"/><input type=\"button\" value=\"del\" onclick=\"del(this.parentElement.parentElement,this.parentElement.parentElement.id)\"/>";
  }
  function del(src,index){
    var tr=document.getElementById(index);
 	tr.parentNode.removeChild(tr);
  }
 </script>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>
 <input type="button" onClick="add()" value="add"/>

<table id="table" border="1">
  <tr>
    <td>数据项</td>
  </tr>
  </table>
 </BODY>
</HTML>

ReFrom:http://www.mtime.com/my/zhd/blog/898436/

分享到：

spring定时器设置 | firebug 使用

2010-02-08 17:08
浏览 2399
评论(2)
分类:Web前端
查看更多

评论

2 楼 geeksun 2010-04-30

mjm13 写道

增么动态增加列呢？

add()就是动态增加列

1 楼 mjm13 2010-04-20

增么动态增加列呢？

发表评论

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

相关推荐

JavaScript动态操作表格，添加，删除行、列及单元格: JavaScript动态操作表格，添加，删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

javascript动态操作表格: javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器

table动态增加删除行列: 使用javascript实现table动态增加删除行列。

基于JavaScript实现动态添加删除表格的行: 又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp 产品名称编号数量重量操作 ...

JavaScript动态操作表格实例(添加,删除行,列及单元格): 主要是对JavaScript动态操作表格实例(添加,删除行,列及单元格)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助

JavaScript动态生成表格案例: 这是一个动态生成表格的 HTML 页面，使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息，包括姓名、科目和得分，并提供了删除操作。在页面中，先声明了一个 table 元素，并设置了 id 为 ...

Dhtml动态插入删除表格实例: 插入删除表格，用javascript实现，动态增加行和删除行，很简单。

js动态操作表格: JavaScript动态操作表格，添加，删除行、列及单元格

javascript操作table(增加/删除行/单元格): 对表格的行和列进行插入/删除，并对每行添加行号

使用 JavaScript 实现图书管理删除功能的示例，并使用 HTML 展示.html: 在这个示例中，我们首先创建了一个包含图书信息的表格，并在每一行的操作列中添加了一个删除按钮。当用户点击删除按钮时，我们通过 JavaScript 获取该按钮的父元素行，并从表格中删除该行。需要注意的是，这个示例...

原创-javascript服务器交互型可编辑表格和我的js常用库: // 到哪一行哪一列结束编辑不写默认所有,写一个参数代表列,行不限 end : [], // 新增操作 addAction : { // (button)执行操作的按钮, button : add, // callback:执行操作后的回调函数，...

程序天下:JavaScript实例自学手册: 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

《程序天下：JavaScript实例自学手册》光盘源码: 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

JS实现页面创建表格.rar: 实现页面创建表格，和删除指定列、行单元格功能。利用JavaScript动态创建表格，可根据用户的使用需求动态添加指定列数、行数，删除指定列数、行数。删除成功或不成功时，会反馈给用户一个弹框提示，增强用户体验感。

异步表格控件源码下载: 提供了若干易用的客户端方法，让你的程序在添加、修改、删除表格数据时无需重新加载大量的表格数据，而仅需要更新客户端展现结果，这样使得程序的后台访问次数大大降低。采用了类似AjaxPro的异步回调方式，使得您...

JavaScript操作表格: //添加行 function addRow() { var objTable = document.getElementById("tb2"); var count = objTable.rows[0].cells.length; //获取行的列数 var row = objTable.insertRow(objTable.rows.length); for (var i...

顺表网页电子表格(基于ExtJS插件) v2.0.rar: 顺表控件是基于Web的类似于微软Excel的网页电子表格控件，是一款Javascript电子表格... 顺表控件功能：无限制的行和列（增加删除）电子表格多单元格操作单元格不同格式（字体，字号等）统计函数无限制undo/redo

Global site tag (gtag.js) - Google Analytics