纯原生js实现table表格的增删

网络编程 2024/11/15 佚名

3 1 2

公司实习生问我table的增删操作，用jQuery很简单的实现了。又问我不使用jQuery，只使用js如何实现。

面对这种情况，我的一贯做法是‘不理解，但是支持'。

jQuery用的多了，人也懒了，但还是用js实现了这一操作，觉得难点在于IE兼容。。。

只是想找代码看看的可以跳过分析过程，文章底部附有完整代码。

以下是coding过程：

HTML结构代码

一个基本的table结构，增加了一些简单的样式，三个按钮分别对应创建、清空，和一个预留。

<!DOCTYPE HTML> 
<html> 
 <head> 
 <title>table</title> 
 <meta charset='utf-8' /> 
 <style type="text/css"> 
 table.base{ 
 border-collapse:collapse; 
 text-align: center; 
 border: 1px solid black; 
 } 
 table, tr, td, th{ 
 border: 1px solid black; 
 } 
 </style> 
 </head> 
 <body> 
 <div id="main-content"> 
 <table id="main-table" class="base"> 
 <thead> 
  <tr> 
  <th colspan="3">This is a table for operations by javascript</th> 
  </tr> 
  <tr> 
  <th> 
  <input type="button" value="CREATE" id="cp_btn" onclick="createTr()" /> 
  </th> 
  <th> 
  <input type="button" value="CLEAR" id="cl_btn" onclick="clearTrs()" /> 
  </th> 
  <th> 
  <input type="button" value="GUESS" id="cl_btn"/> 
  </th> 
  </tr> 
 </thead> 
 <tbody> 
 </tbody> 
 </table> 
 </div> 
 </body> 
</html>

构造函数（伪构造函数）

考虑过，创建一个隐藏的tr，基于此tr执行创建操作。为了不破坏HTML整体结构，决定通过js生成tr对象并append到页面中。

为了在页面加载完成后，再执行dom操作，所以将<script>放在代码下端</body>之前。

基于table中的tbody进行增删操作，可以先声明此全局变量

var vTbody = document.getElementById('main-table').getElementsByTagName('tbody')[0];

创建对象，可以使用document.createElement方法。

以面向对象的方式进行编程，先写构造函数（其实并不是标准的构造函数格式），从最内部的元素开始。

td中可能会有text和button等表单元素，所以先创建一个 input 的构造函数function myInput(vId, vClass, vType, vValue, vParent){}

这里有一个兼容性问题，就是IE内核不支持setAttribute(class, value)，需要使用setAttribute(className, value)，所以为了解决兼容问题，可以通过

setAttribute(class, value) for FF、Chrome..

setAttribute(className, value) for IE

这里采用的是另一种方式 .className，代码如下：

function myInput(vId, vClass, vType, vValue, vParent) { 
 var vInput = document.createElement('input'); 
 if(vId) { 
 vInput.setAttribute('id', vId); 
 } 
 vInput.setAttribute('type', vType); 
 vInput.setAttribute('value', vValue); 
 vInput.className = vClass; 
 if(vParent) { 
 vParent.appendChild(vInput); 
 } 
}

然后是td对象和tr对象的构造函数，大同小异，代码如下

function myTd(vId, vClass, vChild, vParent) { 
 var vTd = document.createElement('td'); 
 if(vId){ 
 vTd.setAttribute('id', vId); 
 } 
 vTd.className = vClass; 
 if(vChild) { 
 vTd.appendChild(vChild); 
 } 
 if(vParent) { 
 vParent.appendChild(vTd); 
 } 
 return vTd; 
} 
function myTr(vId, vClass, vChild, vParent) { 
 var vTr = document.createElement('tr'); 
 if(vId){ 
 vTr.setAttribute('id', vId); 
 } 
 vTr.className = vClass; 
 if(vChild) { 
 vTr.appendChild(vChild); 
 } 
 if(vParent) { 
 vParent.appendChild(vTr); 
 } 
 return vTr; 
}

新建行方法createTr()

构造函数完成之后，完善createTr()方法。

预想的tr结构为序号，文本框，操作按钮。

依次创建相关对象。序号列需要动态刷新，所以先设定class名称，通过方法执行排序操作。

function createTr() { 
 var vTr = new myTr(null, null, null, vTbody); 
 //序列td 
 var vTdSeq = new myTd(null, 'seq', null, vTr); 
 //文本框td 
 var vTdText = new myTd(null, null, null, vTr); 
 var vInputText = new myInput(null, 'td-inp-txt', 'text', '', vTdText); 
 //操作按钮td 
 var vTdBtn = new myTd(null, null, null, vTr); 
 var vInputBtnCp = new myInput(null, 'td-inp-btn-cp', 'button', 'COPY', vTdBtn); 
 var vInputBtnDel = new myInput(null, 'td-inp-btn-del', 'button', 'DELETE', vTdBtn); 
}

排序方法reSequence()

创建一个动态排序方法reSequence() ，有一个兼容性问题 innerText在火狐下无效果，所以使用innerHTML。代码如下

function reSequence() { 
 var vObj = vTbody.getElementsByClassName('seq'); 
 for (var i=0, len=vObj.length; i<len; i++) { 
 vObj[i].innerHTML = i+1; 
 } 
}

有一个兼容性问题,IE8及以下不支持getElementsByClassName()方法，网上找到了解决方案

if(!document.getElementsByClassName){ 
 document.getElementsByClassName = function(className, element){ 
 var children = (element || document).getElementsByTagName('*'); 
 var elements = new Array(); 
 for (var i=0; i<children.length; i++){ 
 var child = children[i]; 
 var classNames = child.className.split(' '); 
 for (var j=0; j<classNames.length; j++){ 
 if (classNames[j] == className){ 
  elements.push(child); 
  break; 
 } 
 } 
 } 
 return elements; 
 }; 
}

试图在Object或者是HTMLTableSectionElement的原型上增加此方法，如

HTMLTableSectionElement.prototype.getElementsByClassName = function(){}

可惜没有实现。

修改后的代码为

function reSequence() { 
 var vObj = vTbody.getElementsByClassName == null"color: #000000">除了排序外，还需其他操作，所以我们创建一个init()方法，集中管理reSequence()这些方法，在createTr()方法的结尾调用init()方法。
清空行方法clearTrs()
移除/销毁某个dom对象，首先想到的是remove()方法，不幸的是，存在IE浏览器兼容问题，因此，采用了一个更简便的方式，对dom对象执行innerHTML=""，代码如下


function clearTrs() { 
 vTbody.innerHTML = ''; 
} 


IE8报错，'未知的运行错误'。查了以下，因为ie8的table.innerHTML是只读属性，妹的！再改：


function clearTrs() { 
 while(vTbody.rows.length >0) { 
 vTbody.deleteRow(); 
 } 
} 


删除行方法addBtnDelsListener()
接下来，给DELETE按钮绑定删除当前行的方法。
为了解决兼容性问题，网上给出的方法是针对不同浏览器（IE、非IE）分别使用addEventListener、attachEvent方法，
我采用的是另一种解决方案：
obj.onclick = function(){};
匿名函数的方法体，吸取了上面clearTrs()方法的经验教训，直接采用deleteRow(index)方法。
有一点需要注意thisTr.rowIndex获取的行数，比当前行要大2，因为thead中还有两行。所以当前的索引数=thisTr.rowIndex-vThead.rows.length
代码如下:


function addBtnDelsListener() { 
 var vBtnDels = vTbody.getElementsByClassName == null"htmlcode">

function addBtnCpsListener() { 
 var vBtnCps = vTbody.getElementsByClassName == null"color: #000000">优化修改
进行一些优化修改工作：
var elements = new Array();
修改为：var elements = [];
原因：数组用[]更好
将addBtnDelsListener方法中的vBtnDels[i].onclick = function() {
修改为：vBtnDels[i].onclick = delTr;
外部新创建一个函数


function delTr() { 
 var vTr = this.parentElement.parentElement; 
 vTbody.deleteRow(vTr.rowIndex-vTbody.parentNode.getElementsByTagName('thead')[0].rows.length); 
 reSequence(); 
 } 


原因：Don't make functions within a loop.
同理，将addBtnCpsListener中的vBtnCps[i].onclick = function() {
修改为：vBtnCps[i].onclick = copyTr;
外部新创建一个函数


<pre code_snippet_id="139791" snippet_file_name="blog_20140103_15_6784659" name="code" class="javascript"> function copyTr() { 
 createTr(); 
 var vNewTr = vTbody.lastChild; 
 var vTr = this.parentElement.parentElement; 
 vNewTr.getElementsByClassName === null"color: #000000">copyTr()方法中的"color: #000000">if else函数。
修改为：


function copyTr() { 
 createTr(); 
 var vNewTr = vTbody.lastChild; 
 var vTr = this.parentElement.parentElement; 
 if(vNewTr.getElementsByClassName) { 
 vNewTr.getElementsByClassName('td-inp-txt')[0].value = 
 vTr.getElementsByClassName('td-inp-txt')[0].value; 
 } else { 
 document.getElementsByClassName('td-inp-txt', vNewTr)[0].value = 
 document.getElementsByClassName('td-inp-txt', vTr)[0].value; 
 } 
} 


原因："htmlcode">

<!DOCTYPE HTML> 
<html> 
 <head> 
 <title>table</title> 
 <meta charset='utf-8' /> 
 <style type="text/css"> 
 table.base{ 
 border-collapse:collapse; 
 text-align: center; 
 border: 1px solid black; 
 } 
 table, tr, td, th{ 
 border: 1px solid black; 
 } 
 </style> 
 </head> 
 <body> 
 <div id="main-content"> 
 <table id="main-table" class="base"> 
 <thead> 
  <tr> 
  <th colspan="3">This is a table for operations by javascript</th> 
  </tr> 
  <tr> 
  <th> 
  <input type="button" value="CREATE" id="cp_btn" onclick="createTr()" /> 
  </th> 
  <th> 
  <input type="button" value="CLEAR" id="cl_btn" onclick="clearTrs()" /> 
  </th> 
  <th> 
  <input type="button" value="GUESS" id="cl_btn"/> 
  </th> 
  </tr> 
 </thead> 
 <tbody> 
 </tbody> 
 </table> 
 </div> 
 <script type="text/javascript"> 
 if(!document.getElementsByClassName){ 
 document.getElementsByClassName = function(className, element){ 
  var children = (element || document).getElementsByTagName('*'); 
  var elements = []; 
  for (var i=0; i<children.length; i++){ 
  var child = children[i]; 
  var classNames = child.className.split(' '); 
  for (var j=0; j<classNames.length; j++){ 
  if (classNames[j] == className){ 
  elements.push(child); 
  break; 
  } 
  } 
  } 
  return elements; 
 }; 
 } 
 var vTbody = document.getElementById('main-table').getElementsByTagName('tbody')[0]; 
 function myInput(vId, vClass, vType, vValue, vParent) { 
 var vInput = document.createElement('input'); 
 if(vId) { 
  vInput.setAttribute('id', vId); 
 } 
 vInput.setAttribute('type', vType); 
 vInput.setAttribute('value', vValue); 
 vInput.className = vClass; 
 if(vParent) { 
  vParent.appendChild(vInput); 
 } 
 return vInput; 
 } 
 function myTd(vId, vClass, vChild, vParent) { 
 var vTd = document.createElement('td'); 
 if(vId){ 
  vTd.setAttribute('id', vId); 
 } 
 vTd.className = vClass; 
 if(vChild) { 
  vTd.appendChild(vChild); 
 } 
 if(vParent) { 
  vParent.appendChild(vTd); 
 } 
 return vTd; 
 } 
 function myTr(vId, vClass, vChild, vParent) { 
 var vTr = document.createElement('tr'); 
 if(vId){ 
  vTr.setAttribute('id', vId); 
 } 
 vTr.className = vClass; 
 if(vChild) { 
  vTr.appendChild(vChild); 
 } 
 if(vParent) { 
  vParent.appendChild(vTr); 
 } 
 return vTr; 
 } 
 function createTr() { 
 var vTr = new myTr(null, null, null, vTbody); 
 //序列td 
 var vTdSeq = new myTd(null, 'seq', null, vTr); 
 //文本框td 
 var vTdText = new myTd(null, null, null, vTr); 
 var vInputText = new myInput(null, 'td-inp-txt', 'text', '', vTdText); 
 //操作按钮td 
 var vTdBtn = new myTd(null, null, null, vTr); 
 var vInputBtnCp = new myInput(null, 'td-inp-btn-cp', 'button', 'COPY', vTdBtn); 
 var vInputBtnDel = new myInput(null, 'td-inp-btn-del', 'button', 'DELETE', vTdBtn); 
 init(); 
 } 
 function clearTrs() { 
 while(vTbody.rows.length >0) { 
  vTbody.deleteRow(); 
 } 
 } 
 function init(){ 
 reSequence(); 
 addBtnDelsListener(); 
 addBtnCpsListener(); 
 } 
 function reSequence() { 
 var vObj = vTbody.getElementsByClassName == null? 
document.getElementsByClassName('seq', vTbody): 
vTbody.getElementsByClassName('seq'); 
 for (var i=0, len=vObj.length; i<len; i++) { 
  vObj[i].innerHTML = i+1; 
 } 
 } 
 function addBtnDelsListener() { 
 var vBtnDels = vTbody.getElementsByClassName == null? 
document.getElementsByClassName('td-inp-btn-del', vTbody): 
vTbody.getElementsByClassName('td-inp-btn-del'); 
 for (var i=0, len=vBtnDels.length; i<len; i++) { 
  vBtnDels[i].onclick = delTr; 
 } 
 } 
 function delTr() { 
 var vTr = this.parentElement.parentElement; 
 vTbody.deleteRow(vTr.rowIndex-vTbody.parentNode.getElementsByTagName('thead')[0].rows.length); 
 reSequence(); 
 } 
 function addBtnCpsListener() { 
 var vBtnCps = vTbody.getElementsByClassNamenull == null? 
document.getElementsByClassName('td-inp-btn-cp', vTbody): 
vTbody.getElementsByClassName('td-inp-btn-cp'); 
for (var i=0, len=vBtnCps.length; i<len; i++) { 
  vBtnCps[i].onclick = copyTr; 
 } 
 } 
 function copyTr() { 
 createTr(); 
 var vNewTr = vTbody.lastChild; 
 var vTr = this.parentElement.parentElement; 
 if(vNewTr.getElementsByClassName) { 
  vNewTr.getElementsByClassName('td-inp-txt')[0].value = 
  vTr.getElementsByClassName('td-inp-txt')[0].value; 
 } else { 
  document.getElementsByClassName('td-inp-txt', vNewTr)[0].value = 
  document.getElementsByClassName('td-inp-txt', vTr)[0].value; 
 } 
 } 
 </script> 
 </body> 
</html> 


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！


                                

                                
                                    js,表格,增删 
                                风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

上一篇
 jQuery电话号码验证实例

下一篇
 微信小程序 tabs选项卡效果的实现

风云阁资源网 Design By www.bgabc.com

评论“纯原生js实现table表格的增删”

再想想

暂无评论...

www.bgabc.com 风云阁资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

最新文章

陈影《绝色靓声》WAV+CUE

2024/11/15
11

龚玥《禅是一枝花(6N纯银SQCD)》原抓WAV+CU

2024/11/15
14

刘德丽《寂寞在唱歌HQCD+A2HD5》[WAV+CUE]

2024/11/15
42

萧亚轩《钻石糖》金牌大风[WAV+CUE][989M]

2024/11/15
62

王菲《王菲精选-菲卖品》环球唱片SHM-SACD[

2024/11/15
55

更新日志

2024年11月15日

陈影《绝色靓声》WAV+CUE

龚玥《禅是一枝花(6N纯银SQCD)》原抓WAV+CUE

刘德丽《寂寞在唱歌HQCD+A2HD5》[WAV+CUE]

萧亚轩《钻石糖》金牌大风[WAV+CUE][989M]

王菲《王菲精选-菲卖品》环球唱片SHM-SACD[ISO][1.9G]

2024年11月15日

孙露《一抹伤HQ》头版限量[WAV+CUE][1G]

黄安.1989-一切从头（TP版）【天际唱片】【FLAC分轨】

群星.1994-浓情蜜意情歌精丫华纳】【WAV+CUE】

邓丽君.1983-淡淡幽情（2022环球MQA-UHQCD限量版）【环球】【WAV+CUE】

试音天碟《专业测试第一天碟》经典天碟精选[WAV分轨][1G]

试音典范《情惹发烧情HQCD》人声发烧极品 [WAV+CUE][1G]

世界顶级汽车音响试音王《幸福在路上》[低速原抓WAV+CUE][1.1G]

老头杯第二届什么时候开始英雄联盟第二届老头杯开赛时间介绍

老头杯第二届什么时候结束英雄联盟第二届老头杯结束时间介绍

老头杯第二届规则是什么英雄联盟老头杯第二届规则介绍

王崴-爵士听堂.蓝色波萨(HQCD)[WAV+CUE]

群星《欧美动听情歌·柔情第5季》2CD【DTS-WAV分轨】

[极品珍藏]德意志进行曲集卡拉扬SACD[WAV+CUE]

前暴雪制作人呼吁反击DEI 玩家：夺回文化！

腾讯证实子公司Sharkmob大规模裁员:整个市场很低迷

友情链接

杰晶网络 DDR爱好者之家桃源资源网杰网资源富贵资源网南强小屋铁雪资源网幽灵资源网万梅资源网狼山资源网白云岛资源网昆仑资源网相思资源网明霞山资源网内蒙古资源网黑松山资源网茶园资源网饿虎岗资源网大旗谷资源网常春岛资源网岱庙资源网兴国资源网快活林资源网蝙蝠岛资源网帝王谷资源网白云城资源网伏龙阁资源网清风细雨楼天枫庄资源网圆月山庄资源网无争山庄资源网神水资源网移花宫资源网神剑山庄资源网无为清净楼资源网金钱帮资源网丐帮资源网华山资源网极乐门资源网小李飞刀资源网凤求凰客栈风云阁资源网金狮镖局鸳鸯亭资源网千金楼资源网更多链接

风云阁资源网 Design By www.bgabc.com

Copyright © 2006~2023 风云阁资源网 Design by www.bgabc.com 手机版

搜索

关键字搜索

热门推荐：

暗黑破坏神4

王国之泪

Win10序列号