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\" onclick=\"delRow(this);\" />");  //创建按钮对象
            var btnUpMove = document.createElement("<input type=\"button\" class=\"ButtonMoveUp\" onclick=\"upMoveRow(this);\" />");   
            var btnDownMove = document.createElement("<input type=\"button\" class=\"ButtonMoveDown\" onclick=\"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/