DHTML实现表格的增加和删除

最新推荐文章于 2018-07-07 19:45:37 发布
最新推荐文章于 2018-07-07 19:45:37 发布
阅读量146 收藏
点赞数
分类专栏： 程中淘沙 文章标签： JavaScript XML HTML ViewUI
xml 代码
  1. <html>  
  2. <head>  
  3. </head>  
  4. <body>  
  5. <p>this is a dhtml demo!!!</p>  
  6. <form name='testForm'>  
  7. <input type='checkbox' name='cb1' value='0' onclick='simpletraversal("cb1",0)'/>  
  8. <input type='checkbox' name='cb2' value='1' onclick='simpletraversal("cb2",1)'/>  
  9. <input type='checkbox' name='cb3' value='2' onclick='simpletraversal("cb3",2)'/>  
  10. <input type='checkbox' name='cb4' value='3' onclick='simpletraversal("cb4",3)'/>  
  11. <table id='table1' border='1' width='100%'>  
  12.   
  13. </table>  
  14. <input type='button' value='del row' onclick='removerow();'/> ---<input type='button' value='add row' onclick='addrow();'/>  
  15. </form>  
js 代码
  1. <script language="JavaScript">   
  2. //var curr_row;   
  3. //var oRow   
  4. //oRow = oTable.insertRow();   
  5. //var oRow   
  6. //oRow = oTable.insertRow(3);   
  7.   
  8. function traversalTable()   
  9. {   
  10.     var tableEle1=document.all.table1;   
  11.     for (curr_row = 0; curr_row < tableEle1.rows.length; curr_row++)   
  12.     {   
  13.       tableEle1.rows[curr_row].style.fontWeight = "bold";   
  14.     }   
  15. }   
  16.   
  17. function addrow(place)   
  18. {   
  19.     var tableEle1=document.all.table1;   
  20.     currowcount=tableEle1.rows.length;   
  21.     tableEle1=document.all.table1;   
  22.     if(place==null)   
  23.     {   
  24.         oRow=tableEle1.insertRow();   
  25.         oCell=oRow.insertCell();   
  26.         oCell.innerHTML = '' + currowcount + '0';   
  27.         oCell=oRow.insertCell();   
  28.         oCell.innerHTML = '' + currowcount + '1';   
  29.     }   
  30.     else  
  31.     {   
  32.         oRow=tableEle1.insertRow(place);   
  33.         oCell=oRow.insertCell();   
  34.         oCell.innerHTML = '' + place + '0';   
  35.         oCell=oRow.insertCell();   
  36.         oCell.innerHTML = '' + place + '1';   
  37.     }   
  38. }   
  39.   
  40. function removerow(place)   
  41. {   
  42.     var tableEle1=document.all.table1;   
  43.     if(tableEle1.rows.length>0)   
  44.     {   
  45.       tableEle1=document.all.table1;   
  46.       if(place==null)   
  47.         tableEle1.deleteRow();   
  48.       else  
  49.         tableEle1.deleteRow(place);   
  50.     }   
  51.     else  
  52.     {   
  53.        alert('no row to del');   
  54.     }   
  55. }   
  56.   
  57. function newaddrow(place)   
  58. {   
  59.     var tableEle1=document.all.table1;   
  60.     var currowcount=tableEle1.rows.length;   
  61.     var insertp=0;   
  62.   
  63.     tableEle1=document.all.table1;   
  64.     if(place==null)   
  65.     {   
  66.         oRow=tableEle1.insertRow();   
  67.         oCell=oRow.insertCell();   
  68.         oCell.innerHTML = '' + currowcount + '0';   
  69.         oCell=oRow.insertCell();   
  70.         oCell.innerHTML = '' + currowcount + '1';   
  71.     }   
  72.     else  
  73.     {   
  74.         if(currowcount==0)   
  75.             insertp=0;   
  76.         else  
  77.         {   
  78.             //loop table, and find the place to insert   
  79.             for (var curr_row = 0; curr_row < tableEle1.rows.length; curr_row++)   
  80.             {   
  81.               //alert(tableEle1.rows[curr_row].id);   
  82.               if(place>tableEle1.rows[curr_row].id)   
  83.               {   
  84.                 insertp++;   
  85.               }   
  86.               else  
  87.               {   
  88.                 break;   
  89.               }   
  90.             }              
  91.         }   
  92.         alert(insertp);   
  93.         oRow=tableEle1.insertRow(insertp);   
  94.         oCell=oRow.insertCell();   
  95.         oRow.id=place;   
  96.         oCell.innerHTML = '' + place + '0';   
  97.         oCell=oRow.insertCell();   
  98.         oCell.innerHTML = '' + place + '1';   
  99.     }   
  100. }   
  101.   
  102. function newremoverow(place)   
  103. {   
  104.     var tableEle1=document.all.table1;   
  105.     var currowcount=tableEle1.rows.length;   
  106.     var deletep=0;   
  107.     if(tableEle1.rows.length>0)   
  108.     {   
  109.       tableEle1=document.all.table1;   
  110.       if(place==null)   
  111.         tableEle1.deleteRow(deletep);   
  112.       else  
  113.       {   
  114.         if(currowcount==0)   
  115.             deletep=0;   
  116.         else  
  117.         {   
  118.             //loop table, and find the place to insert   
  119.             for (var curr_row = 0; curr_row < currowcount; curr_row++)   
  120.             {   
  121.               //alert(tableEle1.rows[curr_row].id);   
  122.               if(place>tableEle1.rows[curr_row].id)   
  123.               {   
  124.                 deletep++;   
  125.               }   
  126.               else  
  127.               {   
  128.                 break;   
  129.               }   
  130.             }              
  131.         }   
  132.         alert(deletep);   
  133.   
  134.       }   
  135.       tableEle1.deleteRow(deletep);   
  136.     }   
  137.     else  
  138.     {   
  139.        alert('no row to del');   
  140.     }   
  141. }   
  142.   
  143. function traversal(obj,place)   
  144. {   
  145.   try  
  146.   {   
  147.     var selcount=0;   
  148.     for(var i=0;i<obj.elements.length;i++)   
  149.     {   
  150.          if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox")   
  151.          {   
  152.            if(obj.elements[i].checked==true)   
  153.            {   
  154.                 //alert('');   
  155.                 selcount++;   
  156.             }   
  157.          }   
  158.   
  159.     }   
  160.     var tableEle2=document.all.table1;   
  161.     var currrowsum=tableEle2.rows.length;   
  162.     alert(currrowsum);   
  163.     if(currrowsum>selcount)   
  164.     {   
  165.         for(var loopcount=0;loopcount<currrowsum-selcount;loopcount++)   
  166.         {   
  167.             removerow(place);   
  168.         }   
  169.     }   
  170.     else  
  171.     {   
  172.         for(var loopcount=0;loopcount<selcount-currrowsum;loopcount++)   
  173.         {   
  174.             addrow();   
  175.         }   
  176.   
  177.     }   
  178.   
  179.   
  180.   }   
  181.   catch (e)   
  182.   {   
  183.   }   
  184.   
  185. }   
  186.   
  187. function simpletraversal(obj,place)   
  188. {   
  189.   var chboxObj=document.getElementById(obj);   
  190.   alert(chboxObj.checked);   
  191.      
  192.   if(chboxObj.checked)   
  193.   {   
  194.     newaddrow(place);   
  195.   }   
  196.   else  
  197.   {   
  198.     newremoverow(place);   
  199.   }   
  200.   
  201. }   
  202. </script>  
xml 代码
  1. </body>  
  2. </html>  
iteye_13469
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TreeGrid DHTML的表格控件
04-19
TreeGrid是一个DHTML的表格控件，它完全使用JavaScript语言编写，用以实现HTML页面上的table, grid, tree view 或者 grid with tree里的数据地展示和编辑。EJS TreeGrid还提供了强大的甘特图功能，能够满足您把项目进度管理以图表的形式直观地展示出来。
Dhtml动态插入删除表格实例
04-20
插入删除表格，用javascript实现，动态增加行和删除行，很简单。
DHTML-----表格的创建和样式
Me丿以卿之名
06-17 782
一、表格的创建、删除 给定表格的行列，实现创建，修改和，删除功能 DHTML技术演示 table{ border-collapse:collapse; color#ff0080; width:800px; } table td{ border:#0000ff 1px solid; text-align:cente
DHTML(Dynamic HTML)--1表格的增删改
Dragon_Dai_2017的博客
08-31 364
利用DHTML中提供的一些方法来进行表格的增删改 1.table对象中的方法 createCaption 在表格中创建空的 caption 元素。  createTFoot 在表格中创建空的 tFoot 元素。  createTHead 在表格中创建空的 tHead 元素。  eleteCaption 从表格中删除 caption 元素及其内容。  ##deleteRow 从表格及 r
DHTML技术演示---动态创建表格、删除表格（详细的解释，适合初学者）
weixin_37720904的博客
05-13 555
详细的演示了，创建单个单元格的表格，创建固定行固定列数的表格、创建用户输入个数的行数。列数表格、删除行、删除列。 图形界面如下（不是很好看，但是技术点都有适合初学者，有详细的解释）
DHTML 查询手册 动态html开发教程，web开发指导
02-04
了解DOM树的概念，学会查找、添加、删除和修改DOM节点，是DHTML中的核心技能。例如，通过`document.getElementById()`或`querySelector()`方法选取元素，然后进行相应的操作。 ### 5. 动画与交互 DHTML的一个显著...
DHTML(table,row,cell)
zzy7075的专栏
10-17 997
箱号                                                 报警内容                                                 报警时间                                                                                    
DHTMLX 表格组件(dhtmlxGrid )使用介绍
热门推荐
herb777的专栏
03-01 1万+
String sql = select {s.*} from t_student s where s.age22; SQLQuery slqQuery = session.createSQLQuery(sql); sqlQuery.addEntity(s, Student.class); List list = sqlQuery.list(); for (int i=0;list.size();i
DHTML中重要的属性方法 （献给DHTML初学者）
理性的浪漫的程序人生
04-22 2914
由于DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是按字母来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node andnode),想学习DHTML中的DOM千万不要从头到尾地看遍所有的属性和方法,你有三国时张松的"过目不忘"的本领吗?没有吧,那就听我分析一下：
js动态增加，删除td，tr，table，div
迷彩风情
01-26 752
js实现的动态添加，删除table内容： 截图如下： 1. 2. 源代码： main.css body { background-image: url(../images/qiantai/bg.png); font-family: arial; font-size: 12px; color: #d4d7da; text-align: center; back...
HTML表格
qq_39224439的博客
07-07 3088
表格表格的定义：&lt;table border="1px" cellspacing="0"&gt; -----------table表示定义表格，border属性表示设置表格的边框宽度为1px，cellspacing表示每个单元格与单元格之间的距离，0表示没有距离，如果不设置cellspacing属性则默认值为1。 &lt;tr&gt; ------------定义表格的一行 &lt;t...
Dhtmlx
向来缘浅，奈何情深
07-20 2157
1. Dhtmlx的使用，官网：https://docs.dhtmlx.com/ 前天刚刚学的，记录一下，虽然是老技术了，但是还是有所收获。才刚刚开始呢 （1）初始化表格： var grid_storein=new dhtmlXGridObject({ parent:"grid_storelimit", image_path:"script/dhtmlx/imgs
用Js，DHTML控制表格的某一列的显示与隐藏
menghuannvxia的专栏
01-10 4644
New  Document      New  Document    //初始化时一定要隐一列 function  initHide(cell) {         obj  =  document.getElementById("showTb");         for(i=0;i    
dhtmlxgrid 2.0 标准版 dwr实现增、删、改、查
gzwfdy
12-25 300
dhtmlxgrid 2.0支持四种类型的数据： - xml;- csv;- json;- javascript array. 下面只介绍xml,json类型的数据。 一、xml类型 dhtmlxgrid要求的xml格式如下： string value string value ...
基于ssm的高校物资采购管理系统设计与实现.docx
最新发布
09-11
基于ssm的高校物资采购管理系统设计与实现.docx
DHTML实现动态滚动文字效果与HTML基础详解
滚动文字-DHTML样式表编写教程 在DHTML（Dynamic Hypertext Markup Language，动态超文本标记...随着技术的发展，现代Web开发更倾向于使用CSS和JavaScript来替代过时的DHTML效果，以实现更流畅、响应式的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值