javascript 表格 操作

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);

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

 

 

你可能感兴趣的:(JavaScript,C++,c,C#,J#)