分享
 
 
 

JavaScript学习笔记(2) 使用DOM编写浏览器兼容的Table操作

王朝html/css/js·作者佚名  2008-11-06
窄屏简体版  字體: |||超大  

想要动态的操作Table就必须熟悉DOM,要想实现浏览器兼容就必须熟悉W3C标准及各个浏览器在表格操作方面的特性。Table是现今数据展示的不二选择,DOM专门为Table添加了一些特性和方法,这有助于我们编写出更简单、高效的程序。

注: 本文的程序在IE7和FireFox3下测试通过。

程序一:动态创建表格

1 /**

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高级程序设计》一书却指出:

IE在setAttribute()方法上有很大的问题,当你使用他时,变更并不会总是正确的反应出来,如果你打算支持IE,最好尽可能使用属性。 大师说的话总是有道理的,所以我们可以使用属性代替方法,幸好FireFox也对属性提供了支持,所以我们可以把程序修改如下:

1 tableNode.id = "tableNode";

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()意思相近,不在重复!

程序二:在指定行的前后插入新建行

1 /**

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 } www.devdao.com

程序15行使用的rows的意思是返回包含表格中所有行的一个数组,相应的还有cells:包含表格中所有单元格的一个数组。既然是包含所有行的数组,我们自然可以利用数组索引得到我们所要的值,

20行使用的cloneNode()方法是我最喜欢的DOM方法之一,他可以让我们针对某个特定的HTML元素进行深(参数为true)、浅(参数为false)拷贝,所谓深拷贝的意思是,返回一个当前元素的副本,该副本具有和原有元素相同的特称。当我们需要新建一个和某个已存在元素相同的元素时,(例如多文件上传)这个方法可以帮我们省去很多代码。所谓浅拷贝就是只拷贝元素骨架而不拷贝元素特称,意思不好表达,可以把上面程序cloneNode()方法的参数设置为false以便观察其效果。

23行使用的insertBefore()方法的使用也很简单:在当前元素的前面插入指定的元素,经常看见网上有人说为什么W3C不弄个insertAfter(),其实,我们只需换个方式思考一下,我们在当前元素的下一个元素前面插入指定的元素,那不就实现了insertAfter()方法,嘿嘿!

程序3:删除指定的行

1 /**

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:删除指定的单元格

1 /**

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的每一行,找到指定的列,然后删除。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有