- 浏览: 97184 次
- 性别:
- 来自: 郑州
文章分类
最新评论
-
去你姑:
页眉页脚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 1702document.getElementById 有时会抓nam ... -
一段Tapestry环境下JS控制DIV显隐的代码
2008-04-21 17:54 1157<!--<br /> <br /> ... -
JS对HTML标签select的操作
2008-04-27 22:49 775//设定那个选项被选中 select.options[i].s ... -
JavaScript事件对象
2008-06-01 01:34 789事件源对象 event.srcElement.tagNa ... -
JavaScript学习笔记(1)变量的生命周期
2008-06-27 17:04 1046变量的生命周期又称为作用域,是指某变量在程序中的有效范 ... -
JavaScript学习笔记(3)数组排序以及在汉字排序中localeCompare()方法的使用
2008-07-14 11:39 913说到表格排序,首先要说的就一定是数组的排序,因为数组排序是 ... -
JavaScript学习笔记(4)表格排序
2008-07-21 17:00 1091本文所实现的表格排序大致可以分为以下几个步骤: 1 ... -
JavaScript学习笔记(5)事件处理之事件流与事件处理函数分配
2008-07-23 09:35 703如果你在页面上做一次点击例如点击一个按钮,那么你是首先点击 ... -
JavaScript学习笔记(6) 通过延迟触发使onDbClick时不触发onClick事件
2008-11-04 20:14 1847在默认的情况下,双击事件时是要触发单击事件的,但是这种情况 ... -
JavaScript学习笔记(7) IE环境下cloneNode的一个bug
2008-11-24 13:08 1048cloneNode是进行DOM操作经常使用的方法,有 ... -
【转】關於 IE6/7 不支援 Element 自訂方法屬性繼承的可行解決方案
2009-10-10 16:00 987由 prototype 談起 物件導向語言,支援「繼承」的概念 ...
相关推荐
从菜鸟教程上学习的关于js的学习笔记,可以用于参考学习使用,脑图样式,浏览更方便,有需要的同学可以带走
javascript 编写跨浏览器的javascript兼容写法 js兼容
javascript解决浏览器兼容性问题
javascript为DOM绑定事件 兼容 学习笔记
详细的javascript学习笔记,DOM,BOM,AJAX等详细笔记!
JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 JavaScript语法 ...
javascript_DOM,javascript_DOM,javascript_DOM,javascript_DOM
前端学习(六)——javascript学习笔记(四)HTML DOM.xmind
Javascript操作XML Dom学习资料
javascript解决innerText浏览器兼容问题思路代码.docx
韩顺平老师的javascript笔记 包括基础语法 javascript面向对象编程 dom编程
JavaScript_DOM编程 DOM 的常用方法属性 经典实例 浏览器兼容处理
jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave ...
或许你在使用JavaScript和Dom编写网页脚本时,也遇到过类似问题. 明明在FireFox浏览器里运行正常的脚本.到了IE里却出现错误. 比如说获取触发js事件的源目标.还有鼠标位置或元素位置问题.动态为元素绑定事件等....
JavascriptDOM基本操作 dom 精品操作
JavaScript中BOM和DOM详解 目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关...
javaScript DOM编程艺术2版学习笔记(1~9)章
最新最全的javascript和css浏览器兼容手册,欢迎有需要的下载,
主要介绍了JavaScript学习笔记之DOM操作,结合实例形式分析了javascript针对dom元素的获取、设置相关操作常用函数使用技巧,需要的朋友可以参考下
javascript_使用DOM.txt