JavaScript操作Table:添加、修改、删除Table元素

最新推荐文章于 2024-07-08 16:22:29 发布
最新推荐文章于 2024-07-08 16:22:29 发布
阅读量336 收藏 1
点赞数
文章标签： javascript ViewUI

方法一：DOM实现

//先获取该表格的引用:
var Container = document.getElementById(TableId);

//然后创建行(TR对象)
var NewTr = document.createElement("tr");

//填充该表格行
var NewTd1 = document.createElement("td");
var NewTd2 = document.createElement("td");
......
NewTr.appendChild(NewTd1);
NewTr.appendChild(NewTd2);
......
下面要做的是继续填充新建好的单元格
另外一种填充表格行的方式是
NewTr.innerHTML = " ........ ";

接下来,要在DOM树中指定NewTr的父节点,

在表格的DOM中,TR的父结点应该是TBODY这个几乎被遗忘的对象.

var LastTr = Container.rows[Container.rows.length - 1];
LastTr.parentNode.appendChild(NewTr);

通常来讲,从表格中删除某一行一般是通过表格的deleteRow()方法和行的rowIndex属性来删除,如下,欲删除刚刚添加的新行:

var Container = document.getElementById(TableId);
var LastTrIndex = Container.rows.length - 1; // 表格最后一行
Container.deleteRow(LastTrIndex);

例子：

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE>动态表格</TITLE>
  5. <METANAME="Generator"CONTENT="EditPlus">
  6. <METANAME="Author"CONTENT="">
  7. <METANAME="Keywords"CONTENT="">
  8. <METANAME="Description"CONTENT="">
  9. <scripttype="text/javascript">
  11. functionaddOneRow(){
  12. //判断是否传入足够参数
  13. if(arguments.length<=1){
  14. return"error";
  15. }
  16. try{
  17. //获取table句柄
  18. vartb=document.getElementById(arguments[0]);
  19. //添加一行
  20. varnewTr=tb.insertRow();
  21. for(vari=1;i<arguments.length;i++){
  22. //添加一列
  23. varnewTd=newTr.insertCell();
  24. newTd.innerHTML=arguments[i];
  25. }
  26. }catch(e){
  27. returne.toString();
  28. }
  29. return"true";
  30. }
  32. functiondeleteOneRow(){
  33. //判断是否传入足够参数
  34. if(arguments.length==0){
  35. return"error";
  36. }
  37. varthisTag=arguments[0];
  38. try{
  39. //获取句柄
  40. varobj=getThisObj(thisTag);
  41. //寻找最靠近的table
  42. while(obj.nodeName.toUpperCase()!='TABLE'){
  43. objobj=obj.parentElement;
  44. }
  45. //删除一行
  46. varnewTr=obj.deleteRow(getTrRowOfTable(thisTag));
  47. }catch(e){
  48. returne.toString();
  49. }
  50. return"true";
  51. }
  53. functiongetTableMaxRow(){
  54. //判断是否传入足够参数
  55. if(arguments.length==0){
  56. return"error";
  57. }
  58. try{
  59. //获取句柄
  60. varobj=getThisObj(arguments[0]);
  61. //寻找最靠近的table
  62. while(obj.nodeName.toUpperCase()!='TABLE'){
  63. objobj=obj.parentElement;
  64. }
  65. returnobj.rows.length;
  66. }catch(e){
  67. returne.toString();
  68. }
  69. }
  71. functiongetTrRowOfTable(){
  72. //判断是否传入足够参数
  73. if(arguments.length==0){
  74. return"error";
  75. }
  76. try{
  77. //获取传入标签的句柄
  78. varobj=getThisObj(arguments[0]);
  79. //寻找最靠近的TR
  80. while(obj.nodeName.toUpperCase()!='TR'){
  81. objobj=obj.parentElement;
  82. }
  83. //返回TR的行号
  84. returnobj.rowIndex;
  85. }catch(e){
  86. //返回异常信息
  87. returne.toString();
  88. }
  89. }
  91. //获取指定标签的句柄
  92. functiongetThisObj(){
  93. varobj;
  94. //若定义了id
  95. if(arguments[0].id!=""){
  96. obj=document.getElementById(arguments[0].id);
  97. returnobj;
  98. }
  99. //若定义了name
  100. if(arguments[0].name!=""){
  101. //通过name取句柄得到的是个数组，所以必须保证该name页面唯一
  102. obj=document.getElementsByName(arguments[0].name)[0];
  103. returnobj;
  104. }
  105. }
  107. functionshowInfo(){
  108. //显示本行号
  109. alert("当前行号为："+getTrRowOfTable(arguments[0]));
  110. //显示总行数
  111. alert("总行数为："+getTableMaxRow(arguments[0]));
  112. }
  115. varrowId=1;
  116. functionaddRow(){
  117. vartagStr="<inputtype=textvalue=cccname="+rowId+"onclick='addRow();showInfo(this)'onchange='deleteOneRow(this);'>";
  118. addOneRow("tb",tagStr);
  119. rowId++;
  120. }
  121. </script>
  122. </HEAD>
  123. <BODYonload="addRow();">
  124. <tableid="tb"></table>
  125. </BODY>
  126. </HTML>

iteye_21199
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
开发日志：使用JavaScript添加/修改/删除Table表单
kaidishi的专栏
09-09 1152
JS代码   function addRows(){//添加多行数据 var myTable = document.getElementById("myTable");//取得tableObject对象 for(i = 0;i<=4;i++){//这里写死4行 var oCell; var oRow=myTable.insertRow(-1);//获取末尾一行
js table 操作-----实现table的插入、修改、删除
weixin_33816611的博客
12-08 1256
上边是一个表，下边是一些录入控件text ,select实现了：插入 ，删除，修改，读取，验证类型唯一性(每种类型只能输入一个记录) <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>NewD...
笔记 表table的操作，数据类型、创建表、修改表结构、删除表
weixin_62129271的博客
03-23 386
char(10)：最长存入10位字符，如果存入8位字符，那么字符结尾添加两个空格使其长度变为10。varchar2(10):最长存入10位字符，如果存入8位字符，那么长度变为8。varchar2和char的区别，同样设置长度为10，存入一个长度为8的字符。alter table 表名 rename column 旧列名 to 新列名;number(10,2)：表示是小数，有效数字是10位，number(10)：表示为整数，有效数字为10位。alter table 表名 drop column 列名;
js实时修改table数据
12-11
js实时修改table数据,简单易用，ajax,json
merge-table:对HTML表格进行合并拆分操作
05-31
HTML表格设计器可以快速的可视化设计一个表格，可以对单元格进行合并，拆分，添加，删除以及设置样式等操作，API简单易懂 ###第一步: grunt /*运行任务，生成js主文件*/ ###第二步: bower install /*安装依赖库*/ ##...
javascript 操作table的特性
11-30
在网页开发中，JavaScript提供了丰富的API来实现对表格的控制，包括添加、删除单元格（Cell）、行（Row）或列（Column），以及获取和修改单元格内容。以下将详细探讨JavaScript操作表格的一些关键特性： 1. **选择...
Table相关整理及Javascript操作table,tr,td
12-13
效果良好的表属性设置： 复制代码代码如下: <table cellSpacing=”0″...解决方案就是给table添加样式border-collapse:collapse 一般的文字截断(适用于内联与块)： 复制代码代码如下: .text-overflow{ display:block;
javascript完整操作Table的增加行，删除行的列子大全
10-30
非常漂亮的js操作table行代码函数。比较方便
jQuery给指定的table动态添加删除行的操作方法
11-23
在网页开发中，jQuery是一个非常常用的JavaScript库，它极大地简化了DOM操作，包括对表格（table）的操作。本文将详细讲解如何使用jQuery给指定的table动态添加和删除行，并提供相应的代码示例。 首先，jQuery的...
js实现动态修改table内容功能
08-07
js实现动态修改table内容功能 js实现动态修改table内容功能 js实现动态修改table内容功能 js实现动态修改table内容功能
table中新增删除修改
12-05
这是一个出题程序，例如：“1+2=”，提交时会给出做题的分数。运用了javascript技术。实现了动态表格中的新增、修改、删除等功能
js增加删除table信息
bugstack虫洞栈
08-21 1520
作业 window.onload = function(){ var etable = ""+ " 姓名 性别 年龄 爱好 操作"+ " 付政委 男 24 编程、看电影 "+ "删除"+
js 操作表格-修改单元格内容
weixin_43294560的博客
11-08 6493
表格的修改 将修改内容变成框(input标签),将原内容按照字符串拼接放在value里 失去焦点后，将框变成文本，并将文本内容变成框的value值 为了避免连续点修改按钮，框内的值将变成input的源码，所以要加上判断单元格的内容是不是数字 function update(){ var cell=document.getElementById("cell"); /*修改...
原生js操作table表格增删改查操作汇总
随手记的笔记
05-16 763
【代码】原生js操作table表格增删改查操作汇总。
js实现表格编辑、保存、添加、删除功能
wmeng13的博客
06-15 2529
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
Table动态增加,删除,修改行,保存数据
chuxue1342的专栏
01-22 4877
<br />下面要说的就是关键的东西了,动态添加删除修改table行了!完全用JS加Ajax做的,大家可以参考一下!<br />先上个效果图<br /><br /> <br />前台代码如下,我这个是报关用的,先择报关的产品,填写报关数量,单价与送货地点,其中报关的时候只能一个厂商一个厂商报,所以这里选择产品的时候有些限制,必须要一个厂商的,而且,我这里是做成选择的,选之后,如果为最后一行才会添加新的一行,有需要的朋友的可以自己改一下,JS方法都是独立的,改动不会太大!下面上前台代码:<br />  <mc
table动态修改表格内容
xiaohuangrener的博客
11-28 7367
动态修改table内容
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 867
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
采用JavaScript删除table元素的行
05-22
可以使用以下代码来删除表格中的行： ```javascript var table = document.getElementById("tableId"); // 获取表格元素 var rowCount = table.rows.length; // 获取表格行数 // 从最后一行开始循环，逐行删除 for...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值