`
clarancepeng
  • 浏览: 191735 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

DHTML实现表格的增加和删除

JavaScriptXMLHTML 
阅读更多
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>  
分享到：
| 使用DES算法进行加密和解密
评论
发表评论

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

相关推荐

    Dhtml动态插入删除表格实例

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

    DHTML 查询手册 动态html开发教程，web开发指导

    了解DOM树的概念，学会查找、添加、删除和修改DOM节点，是DHTML中的核心技能。例如，通过`document.getElementById()`或`querySelector()`方法选取元素，然后进行相应的操作。 ### 5. 动画与交互 DHTML的一个显著...

    dhtmlx UI组件

    dhtmlxGrid支持各种数据格式，包括CSV、JSON和XML，还支持行和列的动态添加与删除。 5. **dhtmlxAccordion**: 手风琴组件允许在有限的空间内显示多个内容块，每次只能打开一个。这种设计对于空间有限的界面特别有用...

    .NET下用js做的树

    在.NET环境中，JavaScript被广泛用于实现用户界面的交互和动态效果，其中“树”控件是一种常见的数据展示形式。树形结构通常用于层次化数据的显示，如文件系统、组织结构或者导航菜单等。本话题将围绕".NET下用js做...

    java开源包3

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    2021-2022计算机二级等级考试试题及答案No.18046.docx

    13. **Word 表格操作**：在 Word 中，可以使用“表格”菜单项的“删除列”命令来移除选定表格的一列。 14. **缓存存储器**：高速缓冲存储器（Cache）用于解决CPU和内存之间速度差异的问题，提高数据处理效率。 15....

    java开源包4

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    CSS2中文手册(最全的样式表)

    CSS2是CSS的第二版，它在CSS1的基础上增加了许多新功能和改进，使得网页设计更为灵活和强大。本手册《CSS2中文手册(最全的样式表)》正是为了帮助已经有一定网页设计基础的读者深入理解和掌握CSS2而编写的，提供了...

    2021-2022计算机二级等级考试试题及答案No.19123.docx

    4. 数据库：数据库是一个结构化的数据集合，通常包括一组表格，用于存储和管理信息。 5. 对象概念：对象是属性（数据）和方法（操作数据的函数）的封装体，对象间通过消息传递进行通信。继承性是面向对象特性之一，...

    疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码

    14.7　传统的DHTML模型 467 14.8　使用window对象 469 14.9　navigator和地理定位 479 14.10　HTML 5增强的History API 485 14.11　使用document对象 490 14.12　HTML 5新增的浏览器分析 493 14.13　本章小结 496 第...

    java开源包1

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包11

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包2

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包6

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包5

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

Magicbox
Global site tag (gtag.js) - Google Analytics