- 浏览: 100637 次
- 性别:
- 来自: 郑州
-
文章分类
最新评论
-
去你姑:
页眉页脚HeaderFooter对象可以于为文档每页添加页眉和 ...
iText的简单应用 -
我会你姑:
沈哥不让用xml
iText的简单应用
想要动态的操作Table就必须熟悉DOM,要想实现浏览器兼容就必须熟悉W3C标准及各个浏览器在表格操作方面的特性。Table是现今数据展示的不二选择,DOM专门为Table添加了一些特性和方法,这有助于我们编写出更简单、高效的程序。
注: 本文的程序在IE7和FireFox3下测试通过。
程序一:动态创建表格
2 * 创建一个特定行、列的表格
3 * @param {Object} rowCount 表格的行
4 * @param {Object} cellCount 表格的列
5 */
6 function createTable(rowCount,cellCount){
7 if(isNaN(rowCount) || isNaN(cellCount)){
8 alert("您输入的不是数字");
9 return;
10 } else if(parseInt(rowCount)<= 0 || parseInt(cellCount) <= 0){
11 alert("请输入一个大于0的数");
12 return;
13 }
14 var tableNode = document.createElement("table");
15
16 tableNode.setAttribute("id","tableNode");
17 tableNode.setAttribute("class","tableStyle");
18 tableNode.setAttribute("border",1);
19
20 for(var i = 0; i < rowCount; i ++){
21 var newRow = tableNode.insertRow(0);
22 for(var j = 0; j < cellCount; j++){
23 var newCell = newRow.insertCell(0);
24 newCell.innerHTML = Number(i+1) + "×" + Number(j+1);
25 }
26 }
27 document.body.appendChild(tableNode);
28 }
这个函数很简单:14行利用document.createElement()方法创建了一个Table标签,到这步我们还没有遇见需要注意的地方,因为大部分浏览器都支持该方法。16-18行我们用setAttribute()方法为新建的table标签加入属性,这几行代码虽然可以被IE和FF解析,但是《JavaScript高级程序设计》一书却指出:
大师说的话总是有道理的,所以我们可以使用属性代替方法,幸好FireFox也对属性提供了支持,所以我们可以把程序修改如下:
2 tableNode.className = "tableStyle";
3 tableNode.border = "1";
唯一要注意的就是,在设置table的class时,要用className。
21行使用的insertRow(),23行使用的insertCell()都是DOM为Table提供的专用API,相应的方法还有deleteRow()和deleteCell(),当使用这两个方法时,我们应该高度注意:IE为两个方法都提供了默认的参数-1,而FireFox却没有为他们提供参数,所以如果没有参数的话,在IE下可以正常运行,但在FireFox下却不行。所以我们应该注意总是为这两个方法提供参数。通俗点可以这样解释这两个函数的参数意思:
0:把新建的行放在已存在行的上面-------总是设置最新的行索引(rowIndex)为0
-1:把新建的行放在已存在行的下面-------行索引递增,从0开始
也可以手动设置该参数,但当设置的参数大于当前table的行索引+1时,程序会报错。insertCell()意思相近,不在重复!
程序二:在指定行的前后插入新建行
2 * 在指定的行索引前或后加入新行
3 * @param {Object} position 标识插入的位置的前后
4 * @param {Object} indexOfRow 行索引
5 */
6 function insertNewRow(position,indexOfRow) {
7 var tableNode = document.getElementById("tableNode");
8 if(tableNode == null){
9 alert("找不到要操作的表格");
10 return ;
11 }
12 if(!isNaN(indexOfRow) && parseInt(indexOfRow) > 0){
13 //通过行索引找到指定的行
14 if(Number(indexOfRow - 1) <= tableNode.rows.length){
15 var tableRow = tableNode.rows[indexOfRow-1];
16 } else {
17 var tableRow = tableNode.rows[tableNode.rows.length-1];
18 }
19 //通过cloneNode复制行,得到新行
20 var newRow = tableRow.cloneNode(true);
21 //在指定的行之前插入新行
22 if(position == 1){
23 tableRow.parentNode.insertBefore(newRow,tableRow);
24 } else {
25 //在指定行之后插入新行
26 tableRow.parentNode.insertBefore(newRow,tableRow.nextSibling);
27 }
28 } else {
29 alert("请输入一个大于0的数字");
30 return;
31 }
32 }
程序15行使用的rows的意思是返回包含表格中所有行的一个数组,相应的还有cells:包含表格中所有单元格的一个数组。既然是包含所有行的数组,我们自然可以利用数组索引得到我们所要的值,
20行使用的cloneNode()方法是我最喜欢的DOM方法之一,他可以让我们针对某个特定的HTML元素进行深(参数为true)、浅(参数为false)拷贝,所谓深拷贝的意思是,返回一个当前元素的副本,该副本具有和原有元素相同的特称。当我们需要新建一个和某个已存在元素相同的元素时,(例如多文件上传)这个方法可以帮我们省去很多代码。所谓浅拷贝就是只拷贝元素骨架而不拷贝元素特称,意思不好表达,可以把上面程序cloneNode()方法的参数设置为false以便观察其效果。
23行使用的insertBefore()方法的使用也很简单:在当前元素的前面插入指定的元素,经常看见网上有人说为什么W3C不弄个insertAfter(),其实,我们只需换个方式思考一下,我们在当前元素的下一个元素前面插入指定的元素,那不就实现了insertAfter()方法,嘿嘿!
程序3:删除指定的行
2 * 删除指定的行
3 * @param {Object} deleteRowIndex 要删除行的索引
4 */
5 function deleteTheRow(deleteRowIndex){
6 var tableNode = document.getElementById("tableNode");
7 var rowCount = tableNode.rows.length;
8
9 if(isNaN(deleteRowIndex) || parseInt(deleteRowIndex) < 1 || parseInt(deleteRowIndex) > Number(rowCount)){
10 alert("请输入一个大于0小于"+Number(rowCount)+"数字")
11 return;
12 }
13 tableNode.deleteRow(Number(deleteRowIndex - 1));
14 }
呵呵,这段小程序没什么好说的,用的主要方法是deleteRow(),但要注意:传入的参数不能大于table的行数,否则会报错!
程序4:删除指定的单元格
2 * 删除指定的单元格
3 * @param {Object} indexOfRow 行
4 * @param {Object} indexOfCell 列
5 */
6 function deleteTheCell(indexOfRow,indexOfCell){
7 var tableNode = document.getElementById("tableNode");
8 var rowNode = tableNode.rows[Number(indexOfRow - 1)];
9 rowNode.deleteCell(Number(indexOfCell-1));
10 }
使用提供的行索引以及列索引找到要删除的单元格,然后调用deleteCell()方法,接下来删除指定列的代码,跟这个类似,无非就是循环table的每一行,找到指定的列,然后删除。
发表评论
-
IE中的document.all和document.getElementById()
2008-04-19 21:10 1747document.getElementById 有时会抓nam ... -
一段Tapestry环境下JS控制DIV显隐的代码
2008-04-21 17:54 1208<!--<br /> <br /> ... -
JS对HTML标签select的操作
2008-04-27 22:49 811//设定那个选项被选中 select.options[i].s ... -
JavaScript事件对象
2008-06-01 01:34 820事件源对象 event.srcElement.tagNa ... -
JavaScript学习笔记(1)变量的生命周期
2008-06-27 17:04 1085变量的生命周期又称为作用域,是指某变量在程序中的有效范 ... -
JavaScript学习笔记(3)数组排序以及在汉字排序中localeCompare()方法的使用
2008-07-14 11:39 965说到表格排序,首先要说的就一定是数组的排序,因为数组排序是 ... -
JavaScript学习笔记(4)表格排序
2008-07-21 17:00 1132本文所实现的表格排序大致可以分为以下几个步骤: 1 ... -
JavaScript学习笔记(5)事件处理之事件流与事件处理函数分配
2008-07-23 09:35 756如果你在页面上做一次点击例如点击一个按钮,那么你是首先点击 ... -
JavaScript学习笔记(6) 通过延迟触发使onDbClick时不触发onClick事件
2008-11-04 20:14 2061在默认的情况下,双击事件时是要触发单击事件的,但是这种情况 ... -
JavaScript学习笔记(7) IE环境下cloneNode的一个bug
2008-11-24 13:08 1110cloneNode是进行DOM操作经常使用的方法,有 ... -
【转】關於 IE6/7 不支援 Element 自訂方法屬性繼承的可行解決方案
2009-10-10 16:00 1026由 prototype 談起 物件導向語言,支援「繼承」的概念 ...
相关推荐
《蓝杰JavaScript学习笔记》是一份综合性的JavaScript学习资料,主要涵盖了JavaScript在网页动态操作、DOM操作以及事件处理等方面的基础知识。这篇笔记通过多个实例文件,如`dynamicCreateTable.htm`、`...
* BOM(Browser Object Model):浏览器对象模型,里面提供了一些属性和方法,可以让我们操作浏览器。 变量和常量 在 JS 中,变量的值是可以变化的,而常量的值是不可变的。JS 中定义变量的方法有: * var 变量名...
### JavaScript学习笔记知识点详解 #### 一、JavaScript概述 ##### 1.1 什么是JavaScript - **定义**:JavaScript是一种用于网页开发的编程语言,它主要用于实现网页中的动态交互功能。 - **特性**: - **基于...
JavaScript DOM操作是网页动态交互的核心技术之一,尤其在创建和修改HTML元素时,如本例中的动态创建表格。本文将详细讲解如何利用...在实际开发中,应结合浏览器兼容性考虑,确保代码在各种环境下都能正常工作。
如果你正在开发新项目,可以考虑使用jQuery 3.x系列,或者考虑更轻量级的库,如Zepto.js,或者直接使用原生的JavaScript ES6语法,这取决于项目的具体需求和浏览器兼容性要求。 总之,通过jQuery,我们可以轻松地...
在更复杂的功能中,JS可以实现树型结构的创建、无边框效果、联动下拉框技术、文本排序、画图类(如饼图、柱状图和贝塞尔曲线)、客户端注册表操作、DOM操作如DIV层的拖拽、显示、隐藏、移动和增加,以及TABLE的相关...
### HTML+JavaScript+CSS 学习笔记 #### HTML 基础知识点 ##### 1. Meta 标签 Meta 标签主要用于提供网页的元数据信息,这些信息不会直接显示在页面上,但对浏览器、搜索引擎等有重要作用。 - `属性名" content=...
...颜色可以使用颜色名称或十六进制表示,...CSS布局如盒模型、浮动、定位等,以及JavaScript的DOM操作、事件监听、Ajax异步请求等内容也是学习的重点。对于初学者,理解并熟练运用这些基础概念是迈进Web开发的第一步。
Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载...以上内容涵盖了Ajax的基本概念、开发实践、浏览器兼容性、数据交互以及前端和后端的一些注意事项,这些都是学习和使用Ajax技术时需要了解的关键点。
### LotusDomino学习笔记知识点概览 #### 1. 选取视图的列的内容 (@Trim @DbColumn) - **@Trim**: 是一个内置的LotusScript函数,用于去除字符串两端的空白字符。 - **@DbColumn**: 此函数用于获取指定列的信息。...
### JQuery学习笔记知识点详解 #### 一、提交表单学习要点 **1. HTML、CSS与JavaScript的角色划分** - **HTML**: 负责页面的内容结构。 - **CSS**: 控制页面的视觉表现(样式)。 - **JavaScript**: 实现页面的...
### AJAX学习笔记详解 #### 一、引言 在当今快速发展的互联网技术中,异步JavaScript和XML(AJAX)已成为构建动态Web应用的关键技术之一。通过本篇笔记,我们将深入探讨AJAX的核心概念和技术要点,并针对实际开发...
### Selenium学习笔记详解 #### 一、Selenium概述与核心思想 Selenium是一个广泛应用于Web自动化测试的强大工具,其核心思想在于通过JavaScript嵌入网页,直接操纵DOM元素,以模拟真实用户的行为进行测试。这种...
在IT领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。这篇“Jquery_学习笔记.zip”压缩包显然包含了一位开发者的学习过程,重点是使用jQuery来实现自定义功能,...
### Dojo学习笔记详解 #### 一、Dojo基本概念 Dojo是一个强大的JavaScript库,旨在简化复杂的Web应用程序开发过程。它由三个主要部分组成:`dojo`、`dijit`和`dojox`。 1. **Dojo基础**: - **概述**:Dojo的...
在“jquery学习笔记 实战2 可以编辑的表格”这个主题中,我们将深入学习如何利用jQuery创建一个用户可以直接在页面上编辑数据的动态表格。 首先,`editable.html`文件是网页的主体部分,它可能包含了HTML结构,其中...
同时,学习如何使用表格`<table>`、列表`<ul>`、`<ol>`以及表单`<form>`元素,以及它们的相关属性,是掌握HTML的基础。 CSS(Cascading Style Sheets)通常与HTML一起使用,用于控制网页的样式和布局。了解如何通过...
30. LotusDomino环境下编写Web浏览器多数据库检索程序 40 31. WINAPI函数 44 32. 用PowerBuilder访问Lotus Notes数据库 55 33. 如何在表单中加入计数器 58 34. 实现两个数据库间的数据追加 C/S 结构 60 ...
- **原始实现:** 使用了传统的JavaScript DOM操作方法,通过`getElementById`获取表格元素,并遍历所有行来设置类名。 - **jQuery实现:** 使用jQuery简化了代码,利用`:even`伪类选择器来选取偶数行,并添加类名。...