`
xiuying
  • 浏览: 543846 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

js操作表格

    博客分类：
  • web
JavaScriptHTML 
阅读更多
js 代码
  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. </head>   
  10.   
  11. <body>   
  12.   
  13. </body>   
  14. <script language="javascript">   
  15. //添加表格   
  16. function loadTable()   
  17. {   
  18.     var tb = document.createElement("table");   
  19.     var rowTitle = tb.insertRow();   
  20.     var cellTitle1= rowTitle.insertCell();   
  21.     var cellTitle2= rowTitle.insertCell();   
  22.     cellTitle2.colSpan = 2;   
  23.     cellTitle2.align = "right";   
  24.     cellTitle2.innerHTML = "<input type = 'button' value= '确定' onclick='addRow(this.parentElement)'>";   
  25.     cellTitle1.innerHTML = "<span>添加</span>";   
  26.     loadSelect(cellTitle1);   
  27.   
  28.     for(var i = 0; i < 10; i++){   
  29.         var row = tb.insertRow();//添加行   
  30.         loadCells(row, i);   
  31.     }   
  32.     //设置属性   
  33.     tb.id = "tb";   
  34.     tb.align="center";   
  35.     tb.cellPadding = 1;   
  36.     tb.bgColor="#ffffee";   
  37.     tb.style.borderWidth = "1px";   
  38.     tb.style.borderCollapse = "collapse";   
  39.     tb.style.borderStyle = "solid";   
  40.     tb.rules = "ALL";//应用全部   
  41.     tb.borderColor = "#000000";   
  42.     document.body.appendChild(tb);   
  43. }   
  44. //添加单元格   
  45. function loadCells(rowObj,m)   
  46. {   
  47.     var cell1 = rowObj.insertCell();//添加单元格   
  48.     var cell2 = rowObj.insertCell();//添加第二个单元格   
  49.     var cell3 = rowObj.insertCell();   
  50.   
  51.     cell1.innerHTML = "&nbsp;" + parseInt(m + 1) + "&nbsp;";   
  52.     cell2.innerHTML = "<input type='text' name='txt_name' value=''>";   
  53.     cell3.innerHTML = "<span style='cursor:hand;' onclick='delRow(this)'>&nbsp;×&nbsp;</span>";   
  54. }   
  55. //添加select框   
  56. function loadSelect(obj)   
  57. {   
  58.     var s = document.createElement("select");   
  59.     s.id = "sel_count";   
  60.     s.name = s.id;   
  61.     for(var i = 1; i <= 10; i++){   
  62.         var opt = new Option(i+"行",i);   
  63.         s.options.add(opt);   
  64.     }   
  65.     obj.appendChild(s);   
  66. }   
  67. //删除行   
  68. function delRow(obj)   
  69. {   
  70.     var tr = obj.parentElement.parentElement;   
  71.     var tb = tr.parentElement.parentElement;//table标签和tr标签隐式存在一个tbody   
  72.   
  73.     tb.deleteRow(tr.rowIndex);   
  74. }   
  75. //选择好的个数的行，传入单元格   
  76. function addRow(obj)   
  77. {   
  78.     var tr = obj.parentElement;   
  79.     var cnt = (tr.cells[0]).children[1].value;//个数   
  80.     var tb = tr.parentElement.parentElement;   
  81.   
  82.     var lastRow = tb.rows[tb.rows.length - 1];//获得当前最后一行   
  83.     var maxIndex= parseInt(lastRow.cells[0].innerText);//获得当前表格中显示的最好编号   
  84.   
  85.     for(var i = 0; i < cnt; i++){   
  86.         var newRow = tb.insertRow();   
  87.         loadCells(newRow,parseInt(maxIndex + i));   
  88.     }   
  89.        
  90. }   
  91.   
  92. loadTable();   
  93. </script>   
  94. </html>   
分享到：
| 不同语言的substring
评论
3 楼 123123 2007-12-12  
:twisted  : 
2 楼 junjun 2007-08-19  
1 楼 xiuying 2007-08-10  
input 框代码为：<input type = 'button' value= '确定' onclick='addRow(this.parentElement)'>
和
<input type='text' name='txt_name' value=''>
发表评论

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

相关推荐

    js操作表格的方法介绍

    在JavaScript中，操作表格是一种常见的任务，特别...通过不断学习和实践，你可以熟练掌握JavaScript操作表格的各种技巧。参考提供的博文链接（https://zyz.iteye.com/blog/1743610），可以获取更多详细信息和示例代码。

    JavaScript操作表格

    ### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中，我们首先看到了一个简单的示例，展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤： 1. **获取容器元素**：通过`...

    js简单表格操作

    在JavaScript（简称JS）中，表格操作是网页动态交互中常见的功能，主要用于处理HTML中的`&lt;table&gt;`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作，帮助你创建更加灵活和交互性强的数据展示界面。 首先...

    JS操作表格代码CRUD操作(很完整)

    总的来说，JS操作表格的核心在于理解DOM API，如`getElementById`，`createElement`，`appendChild`，`textContent`等属性和方法。通过这些工具，我们可以轻松地实现对HTML表格的数据操作。这个例子中的代码提供了...

    javascript操作表格.doc

    以下是关于JavaScript操作表格的一些关键知识点： 1. **DOM操作**：JavaScript通过Document Object Model (DOM)来访问和修改HTML元素。在这个例子中，`document.getElementById`函数用于获取页面上的元素，如按钮和...

    JAVASCRIPT自动添加表格

    在提供的压缩包文件“JS操作表格大全”中，可能包含了各种JavaScript操作表格的实例代码，包括但不限于以上所述的添加和删除操作，还可能涵盖排序、过滤、编辑等功能。学习并实践这些示例，将有助于提升你对...

    js操作表格， 带初始化的

    在JavaScript编程中，操作表格是一项常见的任务，尤其是在网页交互和数据展示方面。在这个主题中，我们将深入探讨如何使用JavaScript来创建、初始化、增加和删除表格元素。以下是一份详细的指南，帮助你理解并掌握...

    js 操作表格动态添加和删除行

    js 操作表格动态添加和删除行

    js 操作 表格 操作 常用方法

    表格操作常用方法! 值得下载看看!资源免费,大家分享!!

    javascript动态操作表格

    在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`&lt;table&gt;`...

    JS操作Word生成表格

    在IT行业中，JavaScript（简称JS）通常用于网页前端交互，但通过特定的库和API，我们也能使用JS来操作Microsoft Word文档，包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能，以及相关的...

    js控制操作表格

    以下是一些关于使用JavaScript操作表格的关键知识点： 1. HTML表格基础：HTML `&lt;table&gt;` 标签用于创建表格，`&lt;tr&gt;` 代表行，`&lt;td&gt;` 代表单元格，而`&lt;th&gt;` 用于表头。了解这些基础元素是进行JS操作的前提。 2. DOM...

    js 获取表格内容

    为了更好地理解和掌握JavaScript操作表格的方法，建议读者进行以下实践： - 使用上述方法创建一个简单的表格，尝试获取其中的数据并显示出来。 - 探索更多有关`table`元素的属性和方法，以便更灵活地处理表格数据。 ...

    javascript表格操作

    在探讨“javascript表格操作”的知识点时，我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素，包括但不限于创建、删除行或单元格，以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...

    javascript 操作表格

    在本文中，我们将深入探讨如何使用JavaScript来操作HTML表格，包括动态添加表格、添加行、添加列以及编辑表格内容。 1. **创建表格（Table）** 在HTML中，表格通常通过`&lt;table&gt;`元素定义，而JavaScript可以用于...

    javascript实现表格添加删除等操作

    这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用，尤其适合初学者进行学习和实践。 首先，`students.html`文件很可能是用来展示表格结构...

    javascript操作表格并统计行数

    主要用到了元素的克隆，如何在各浏览器中兼容，并且在IE中如何统计动态操作后的行列数

    纯js电子表格操作

    "纯js电子表格操作"这个主题涉及到使用JavaScript处理电子表格数据，如读取、解析、修改和生成Excel文件。下面将详细探讨相关的知识点。 1. **js-xlsx库**： js-xlsx是JavaScript的一个开源库，专门用于处理Excel...

    JavaScript范例宝典之-07 操作表格.CHM

    JavaScript范例宝典 javascript工作中实例参考的很有帮助哦，留给自己以后工作中备用；另外因为整个文件很大(超过了csdn的限制15M)，本人不得已按功能拆分上传。上传耗了我快一个小时，希望大家支持

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