js操作table对象及页面元素小结

• 使用html dom document对象的方法

方法	描述	IE	F	O	W3C
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。	4	1	9	Yes
getElementById()	返回对拥有指定 id 的第一个对象的引用。	5	1	9	Yes
getElementsByName()	返回带有指定名称的对象集合。	5	1	9	Yes
getElementsByTagName()	返回带有指定标签名的对象集合。	5	1	9	Yes
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。	4	1	9	Yes
write()	向文档写 HTML 表达式 或 JavaScript 代码。	4	1	9	Yes
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。	4	1	9	Yes

这里使用getElementById()方法得到table对象，代码如下：

var  complexSeachResult  =  document.getElementById( " complexSeachResult " );

 

• 得到table对象后，就可以对该table对象进行增加、删除、修改、移动等操作了，下表是table提供的方法

方法	描述	IE	F	O	W3C
createCaption()	为表格创建一个 caption 元素。	4	1	9	Yes
createTFoot()	在表格中创建一个空的 tFoot 元素。	4	1	9	Yes
createTHead()	在表格中创建一个空的 tHead 元素。	4	1	9	Yes
deleteCaption()	从表格删除 caption 元素以及其内容。	4	1	9	Yes
deleteRow()	从表格删除一行。	4	1	9	Yes
deleteTFoot()	从表格删除 tFoot 元素及其内容。	4	1	9	Yes
deleteTHead()	从表格删除 tHead 元素及其内容。	4	1	9	Yes
insertRow()	在表格中插入一个新行。	4	1	9	Yes
moveRow(from,to)	将一行移动到新的位置上。	5			No
refresh()	刷新表格中的内容	4			No

这里用insertRow()插入新行、deleteRow()删除当前行和moveRow(from,to)移动行操作，代码如下：

代码

var  row  =  complexSeachResult.insertRow();   // 插入行
complexSeachResult.deleteRow(row.rowIndex);   // 删除行
complexSeachResult.moveRow(row.rowIndex, row.rowIndex  -   1 );   // 上移行
complexSeachResult.moveRow(row.rowIndex, row.rowIndex  +   1 );   // 下移行

 

 

给行添加页面元素，TableRow对象提供的方法如下：

方法	描述	IE	F	O	W3C
deleteCell()	删除行中的指定的单元格。	4	1	9	Yes
insertCell()	在一行中的指定位置插入一个空的 <td> 元素。	4	1	9	Yes

 这里使用 insertCell()方法为row行对象插入td对给td对象创建页面元素,document.createElement()方法创建页面元素,对象的setAttribute方法给元素赋初始值，代码如下：

 

代码

             var  row  =  complexSeachResult.insertRow();         

             var  btnDel  =  document.createElement( " <input value=\ " 删除\ "  type=\ " button\ "  class=\ " ButtonStyle\ "  οnclick=\ " delRow( this );\ "  /> " );   // 创建按钮对象
             var  btnUpMove  =  document.createElement( " <input type=\ " button\ "  class=\ " ButtonMoveUp\ "  οnclick=\ " upMoveRow( this );\ "  /> " );   
             var  btnDownMove  =  document.createElement( " <input type=\ " button\ "  class=\ " ButtonMoveDown\ "  οnclick=\ " downMoveRow( this );\ "  /> " );

             var  cbLeftBracket  =  document.createElement( " <input type=\ " checkbox\ "  /> " );   // 创建复选框对象
             var  ddlFieldValue  =  document.createElement( " <select name=\ " ddlFieldValue\ "  ></select> " );   // 创建下拉列表对象
             var  selRelationalOperators  =  document.createElement( " <select name=\ " selRelationalOperators\ "  ></select> " );
             var  txtValue  =  document.createElement( " <input type=\ " text\ "  style=\ " width: 100px\ "  /> " );   // 创建文本框对象
             var  cbRightBracket  =  document.createElement( " <input type=\ " checkbox\ "  /> " );
             var  selLogicalOperators  =  document.createElement( " <select name=\ " selLogicalOperators\ "  ></select> " );

             // 将元素插入到相应的td内
            row.insertCell( 0 ).appendChild(btnDel);  
            row.insertCell( 1 ).appendChild(btnUpMove);
            row.insertCell( 2 ).appendChild(btnDownMove);

            row.insertCell( 3 ).appendChild(cbLeftBracket);
            row.insertCell( 4 ).appendChild(ddlFieldValue);
            row.insertCell( 5 ).appendChild(selRelationalOperators);
            row.insertCell( 6 ).appendChild(txtValue);
            row.insertCell( 7 ).appendChild(cbRightBracket);
            row.insertCell( 8 ).appendChild(selLogicalOperators);

             // 给元素赋初始值
            cbLeftBracket.setAttribute( " checked " , true );  
            //jsSelectConpy(document.getElementById( " ddlField " ), ddlFieldValue);
            //jsSelectConpy(document.getElementById( " selRelationalOperators " ), selRelationalOperators);
            txtValue.setAttribute( " value " , document.getElementById( " txtValue " ).value);
            cbRightBracket.setAttribute( " checked " , document.getElementById( " cbRightBracket " ).checked);
            //jsSelectConpy(document.getElementById( " selLogicalOperators " ), selLogicalOperators);

 

• 对下拉列表框的复制、设置选择项、添加新项等操作的封装,select的一些方法及属性

方法	描述	IE	F	O	W3C
add()	向下拉列表添加一个选项。	4	1	9	Yes
blur()	从下拉列表移开焦点。	4	1	9	Yes
focus()	在下拉列表上设置焦点。	4	1	9	Yes
remove()	从下拉列表中删除一个选项。	4	1	9	Yes

集合	描述	IE	F	O	W3C
options[]	返回包含下拉列表中的所有选项的一个数组。	4	1	9	Yes

属性	描述	IE	F	O	W3C
disabled	设置或返回是否应禁用下拉列表。	5	1	9	Yes
form	返回对包含下拉列表的表单的引用。	4	1	9	Yes
id	设置或返回下拉列表的 id。	4	1	9	Yes
length	返回下拉列表中的选项数目。	4	1	9	Yes
multiple	设置或返回是否选择多个项目。	4	1	9	Yes
name	设置或返回下拉列表的名称。	4	1	9	Yes
selectedIndex	设置或返回下拉列表中被选项目的索引号。	4	1	9	Yes
size	设置或返回下拉列表中的可见行数。	4	1	9	Yes
tabIndex	设置或返回下拉列表的 tab 键控制次序。	5	1	9	Yes
type	返回下拉列表的表单类型。	4	1	9	Yes

属性	描述	IE	F	O	W3C
className	设置或返回元素的 class 属性。	5	1	9	Yes
dir	设置或返回文本的方向。	5	1	9	Yes
lang	设置或返回元素的语言代码。	5	1	9	Yes
title	设置或返回元素的 title 属性。	5	1	9	Yes

这里使用add()方法加加新项，remove()移除项，selectedIndex属性得到当前选择行，options[]集合操作select项集合等，代码如下：

代码

         // select 操作

         // 拷贝select 
         function  jsSelectConpy(sourceSelect, targetSelect) {
             for  ( var  i  =   0 ; i  <  sourceSelect.options.length; i ++ ) {
                jsAddItemToSelect(targetSelect, sourceSelect.options[i].text, sourceSelect.options[i].value);
            }
            jsSelectItemByValue(targetSelect, sourceSelect.options[sourceSelect.selectedIndex].text);
        }

         // 判断select选项中 是否存在Value="paraValue"的Item 
         function  jsSelectIsExitItem(objSelect, objItemValue) {
             var  isExit  =   false ;
             for  ( var  i  =   0 ; i  <  objSelect.options.length; i ++ ) {
                 if  (objSelect.options[i].value  ==  objItemValue) {
                    isExit  =   true ;
                     break ;
                }
            }
             return  isExit;
        }

         // 向select选项中 加入一个Item
         function  jsAddItemToSelect(objSelect, objItemText, objItemValue) {
             // 判断是否存在
             if  ( ! jsSelectIsExitItem(objSelect, objItemValue)) {
                 var  varItem  =   new  Option(objItemText, objItemValue);
                objSelect.options.add(varItem);
            }
        }

         // 从select选项中 删除一个Item 
         function  jsRemoveItemFromSelect(objSelect, objItemValue) {
             if  (jsSelectIsExitItem(objSelect, objItemValue)) {
                 for  ( var  i  =   0 ; i  <  objSelect.options.length; i ++ ) {
                     if  (objSelect.options[i].value  ==  objItemValue) {
                        objSelect.options.remove(i);
                         break ;
                    }
                }
            }
        }

         // 修改select选项中 value="paraValue"的text为"paraText" 
         function  jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
             // 判断是否存在   
             if  (jsSelectIsExitItem(objSelect, objItemValue)) {
                 for  ( var  i  =   0 ; i  <  objSelect.options.length; i ++ ) {
                     if  (objSelect.options[i].value  ==  objItemValue) {
                        objSelect.options[i].text  =  objItemText;
                         break ;
                    }
                }
            }
        }

         // 设置select中ItemText为选中 
         function  jsSelectItemByValue(objSelect, objItemText) {
             // 判断是否存在   
             var  isExit  =   false ;
             for  ( var  i  =   0 ; i  <  objSelect.options.length; i ++ ) {
                 if  (objSelect.options[i].text  ==  objItemText) {
                    objSelect.options[i].selected  =   true ;
                    isExit  =   true ;
                     break ;
                }
            }
             return  isExit;
        } 

 

完整实例效果如下图：

使用VS2008编写的实例源代码：/Files/tqlin/jsDemo.rar

参考资料：http://www.w3school.com.cn/

 

转载于:https://www.cnblogs.com/tqlin/archive/2010/10/21/1857329.html