javascript 表格操作

shuaigg.babysky

浏览: 571581 次
性别:
来自: 济南

最近访客更多访客>>

sgqt

amu123456

ringphone

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript C C++C#J#

ie上有个Bug,js创建的table,默认给你插上了一个空的tbody,所以要移除掉这个tbody

for(var i = 0 ; i < table.childNodes.length ; i++) {
                if(table.childNodes[i].tagName == 'TBODY' && table.childNodes[i].innerHTML == '') {
                    table.removeChild(table.childNodes[i]);
                    break;
                }
            }

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    </head>
    <body>
        <script>
            var frag = document.createDocumentFragment();
            var table = document.createElement('table');
            frag.appendChild(table);

            var caption = table.createCaption();
            caption.innerHTML = '<font color="red">我是标题，哈哈哈</font>';
            var thead = table.createTHead();
            var headrow = thead.insertRow(0);
            var c = headrow.insertCell(0);
            c.innerHTML = '表头内容1';
            c = headrow.insertCell(1);
            c.innerHTML = '表头内容2';

            headrow = thead.insertRow(1);
            c = headrow.insertCell(0);
            c.innerHTML = '表头内容3';
            c = headrow.insertCell(1);
            c.innerHTML = '表头内容4';

            var tbody = document.createElement('tbody');
            table.appendChild(tbody);
            var bodyrow = tbody.insertRow(0);
            c = bodyrow.insertCell(0);
            c.innerHTML = '表体内容1';
            c = bodyrow.insertCell(1);
            c.innerHTML = '表体内容2';

            bodyrow = tbody.insertRow(1);
            c = bodyrow.insertCell(0);
            c.innerHTML = '表体内容3';
            c = bodyrow.insertCell(1);
            c.innerHTML = '表体内容4';

            tbody = document.createElement('tbody');
            table.appendChild(tbody);
            var bodyrow = tbody.insertRow(0);
            c = bodyrow.insertCell(0);
            c.innerHTML = '表体内容5';
            c = bodyrow.insertCell(1);
            c.innerHTML = '表体内容6';

            bodyrow = tbody.insertRow(1);
            c = bodyrow.insertCell(0);
            c.innerHTML = '表体内容7';
            c = bodyrow.insertCell(1);
            c.innerHTML = '表体内容8';

            var foot = table.createTFoot();
            var footrow = foot.insertRow(0);
            c = footrow.insertCell(0);
            c.innerHTML = '表尾内容1';
            c = footrow.insertCell(1);
            c.innerHTML = '表尾内容2';

            footrow = foot.insertRow(1);
            c = footrow.insertCell(0);
            c.innerHTML = '表尾内容3';
            c = footrow.insertCell(1);
            c.innerHTML = '表尾内容4';

            for(var i = 0 ; i < table.childNodes.length ; i++) {
                if(table.childNodes[i].tagName == 'TBODY' && table.childNodes[i].innerHTML == '') {
                    table.removeChild(table.childNodes[i]);
                    break;
                }
            }

            document.body.appendChild(frag);

            alert('获得标题:' + table.caption.innerHTML);
            alert('获得表头:' + table.tHead.innerHTML);

            alert('对表头进行遍历');
            for(var i = 0 ; i < table.tHead.rows.length ; i++) {
                var row = table.tHead.rows[i];
                for(var j = 0 ; j < row.cells.length ; j++) {
                    alert('第' + (i+1) + '行第' + (j + 1) + '列内容:' + row.cells[j].innerHTML);
                }
            }
            alert('对表体进行遍历:' + table.tBodies.length);

            for(var w = 0 ; w < table.tBodies.length ; w++) {
                tbody = table.tBodies[w];
                for(var i = 0 ; i < tbody.rows.length ; i++) {
                    var row = tbody.rows[i];
                    for(var j = 0 ; j < row.cells.length ; j++) {
                        alert('第' + (w + 1) + '个表体的第' + (i+1) + '行第' + (j + 1) + '列内容:' + row.cells[j].innerHTML);
                    }
                }
            }

            alert('对表尾进行遍历:');
            for(var i = 0 ; i < table.tFoot.rows.length ; i++) {
                var row = table.tFoot.rows[i];
                for(var j = 0 ; j < row.cells.length ; j++) {
                    alert('表尾第' + (i + 1) + '行第' + (j + 1) + '列内容:' + row.cells[j].innerHTML);
                }
            }
            /*
            alert('使用rows属性: ' + table.rows.length);

            setTimeout(function() {
                alert('删除标题');
                table.deleteCaption();
            } , 1000);

            setTimeout(function() {
                alert('删除表头');
                table.deleteTHead();
            }, 1000);

            setTimeout(function() {
                alert('删除表尾');
                table.deleteTFoot();
            }, 1000);

            table.deleteRow(7);
            */
            /*
            row = table.insertRow(8);
            cell = row.insertCell(0);
            cell.innerHTML = 'append1';
            cell = row.insertCell(1);
            cell.innerHTML = 'append2';
            */
            table.tFoot.deleteRow(0);
        </script>
    </body>
</html>

table.rows 返回表头，表体，表尾所有行数之和

table.deleteRow 删除一行，删除的是所有的表头，表体，表尾的总和所在的行，从0开始计数

table.insertRow 插入一行，插入的是新的一行，firefox上必须提供插入行所在的位置，
行的位置是所有的表头，表体，表尾之和的那种下标

table.tHead.deleteRow(index);
table.tBody.deleteRow(index);
table.tBodies[1].deleteRow(index);

这种方法也支持，不过删除的是指定的自身区域内的行

分享到：

正则的反向引用被RegExp.$x所包括 | 如何获得document的scrollLeft和scrollTop

2010-09-19 14:42
浏览 1400
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论