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

最新推荐文章于 2023-03-23 09:24:33 发布
最新推荐文章于 2023-03-23 09:24:33 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： Web前端 文章标签： table javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxp_java/article/details/7842107
版权

方法一：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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <HEAD>  
  4. <TITLE>动态表格</TITLE>  
  5. <META NAME="Generator" CONTENT="EditPlus">  
  6. <META NAME="Author" CONTENT="">  
  7. <META NAME="Keywords" CONTENT="">  
  8. <META NAME="Description" CONTENT="">  
  9. <script type="text/javascript">  
  10.   
  11. function addOneRow(){  
  12.   //判断是否传入足够参数  
  13.  if(arguments.length <= 1 ){  
  14.   return "error";  
  15.  }  
  16.  try{  
  17.   //获取table句柄  
  18.   var tb=document.getElementById(arguments[0]);  
  19.   //添加一行  
  20.   var newTr = tb.insertRow();  
  21.   for(var i=1 ;i < arguments.length;i++){    
  22.    //添加一列  
  23.    var newTd = newTr.insertCell();  
  24.    newTd.innerHTML = arguments[i];   
  25.   }  
  26.  }catch (e) {  
  27.   return e.toString();  
  28.  }  
  29.  return "true";  
  30. }  
  31.   
  32. function deleteOneRow(){  
  33.   //判断是否传入足够参数  
  34.  if(arguments.length == 0){  
  35.   return "error";  
  36.  }  
  37.  var thisTag = arguments[0];  
  38.  try{  
  39.   //获取句柄  
  40.   var obj = getThisObj(thisTag);   
  41.   //寻找最靠近的table  
  42.   while (obj.nodeName.toUpperCase() != 'TABLE'){    
  43.    objobj =obj.parentElement;    
  44.   }   
  45.   //删除一行  
  46.   var newTr = obj.deleteRow(getTrRowOfTable(thisTag));   
  47.  }catch (e) {  
  48.   return e.toString();  
  49.  }  
  50.  return "true";  
  51. }  
  52.   
  53. function getTableMaxRow(){  
  54.  //判断是否传入足够参数  
  55.  if(arguments.length == 0 ){  
  56.   return "error";  
  57.  }  
  58.  try{  
  59.   //获取句柄  
  60.   var obj = getThisObj(arguments[0]);   
  61.   //寻找最靠近的table  
  62.   while (obj.nodeName.toUpperCase() != 'TABLE'){    
  63.    objobj =obj.parentElement;    
  64.   }  
  65.   return obj.rows.length;  
  66.  }catch (e) {  
  67.   return e.toString();  
  68.  }  
  69. }  
  70.   
  71. function getTrRowOfTable(){  
  72.  //判断是否传入足够参数  
  73.  if(arguments.length == 0 ){  
  74.   return "error";  
  75.  }  
  76.  try{  
  77.   //获取传入标签的句柄  
  78.   var obj = getThisObj(arguments[0]);   
  79.   //寻找最靠近的TR  
  80.   while (obj.nodeName.toUpperCase() != 'TR'){    
  81.    objobj =obj.parentElement;    
  82.   }  
  83.   //返回TR的行号   
  84.   return obj.rowIndex;  
  85.  }catch (e) {  
  86.   //返回异常信息  
  87.   return e.toString();  
  88.  }  
  89. }  
  90.   
  91. //获取指定标签的句柄  
  92. function getThisObj(){  
  93.  var obj;  
  94.  //若定义了id  
  95.  if(arguments[0].id != ""){  
  96.   obj=document.getElementById(arguments[0].id);  
  97.   return obj;  
  98.  }   
  99.  //若定义了name  
  100.  if(arguments[0].name != ""){  
  101.   //通过name取句柄得到的是个数组，所以必须保证该name页面唯一  
  102.   obj=document.getElementsByName(arguments[0].name)[0];    
  103.   return obj;  
  104.  }  
  105. }  
  106.   
  107. function showInfo(){  
  108.  //显示本行号  
  109.  alert("当前行号为："+ getTrRowOfTable(arguments[0]));  
  110.  //显示总行数  
  111.  alert("总行数为："+ getTableMaxRow(arguments[0]));  
  112. }  
  113.   
  114.   
  115. var rowId=1;  
  116. function addRow(){  
  117.  var tagStr="<input type=text value=ccc name="+rowId+" onclick='addRow();showInfo(this)' onchange='deleteOneRow(this);'>";  
  118.  addOneRow("tb",tagStr);  
  119.  rowId++;  
  120. }  
  121. </script>  
  122. </HEAD>  
  123. <BODY onload="addRow();">  
  124.  <table id="tb"></table>  
  125. </BODY>  
  126. </HTML>  
gxp_java
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
开发日志：使用JavaScript添加/修改/删除Table表单
kaidishi的专栏
09-09 1154
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表格增删改查操作汇总
最新发布
随手记的笔记
05-16 866
【代码】原生js操作table表格增删改查操作汇总。
js table 操作-----实现table的插入、修改、删除
weixin_33816611的博客
12-08 1259
上边是一个表，下边是一些录入控件text ,select实现了：插入 ，删除，修改，读取，验证类型唯一性(每种类型只能输入一个记录) <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>NewD...
笔记 表table的操作，数据类型、创建表、修改表结构、删除表
weixin_62129271的博客
03-23 390
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. **选择...
javascript完整操作Table的增加行，删除行的列子大全
10-30
### JavaScript 完整操作 Table 的增加行与删除行知识点详解 #### 一、引言 在 Web 开发中，表格（Table）是非常常见的一种数据展示形式。JavaScript 提供了丰富的 API 来操作 DOM（Document Object Model），使得...
Table相关整理及Javascript操作table,tr,td
12-13
效果良好的表属性设置： 复制代码代码如下: <table cellSpacing=”0″...解决方案就是给table添加样式border-collapse:collapse 一般的文字截断(适用于内联与块)： 复制代码代码如下: .text-overflow{ display:block;
js实现动态修改table内容功能
08-07
js实现动态修改table内容功能 js实现动态修改table内容功能 js实现动态修改table内容功能 js实现动态修改table内容功能
table中新增删除修改
12-05
这是一个出题程序，例如：“1+2=”，提交时会给出做题的分数。运用了javascript技术。实现了动态表格中的新增、修改、删除等功能
javascript table 添加行
leon28的专栏
03-13 920
<!-- // 增加品牌函数 function addSort() { var name = document.getElementById("add").value; if(name == "" ) { return; } var row = docume
javascript 实现 table 增加行
nono365的专栏
08-19 590
test form post                                                                                   function addRow(){         var tableA = document.getElementById('tableA');
js增加删除table信息
bugstack虫洞栈
08-21 1520
作业 window.onload = function(){ var etable = ""+ " 姓名 性别 年龄 爱好 操作"+ " 付政委 男 24 编程、看电影 "+ "删除"+
javascript中给table添加新的行列
热门推荐
秋尾鸣的博客
03-24 1万+
原生JS：&lt;script&gt; var t = document.getElementById("test"); t.innerHTML = "&lt;tr&gt;&lt;td&gt;数据&lt;/td&gt;&lt;/tr&gt;"; //或者 var t = document.getElementById("test"); var tr = docume
js动态创建table、读取table
weixin_39418164的博客
04-17 3370
创建：                                        var mytable = document.getElementById("mytable"); var mytr = ""; for(var i=0;i&lt;data.length;i++){ var tr = document.createElement("tr"); ...
JavaScript DOM基础：操作HTML元素与实战示例
5. 动态页面元素创建：JavaScript允许开发者根据用户行为或程序逻辑动态创建或删除页面元素，提高网页的灵活性。 6. HTML基础知识回顾：这部分回顾了HTML的基础知识，包括常用的标签如`<html>`、`<head>`、`<title>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值