javascript 表格操作

最新推荐文章于 2025-07-18 11:48:46 发布

原创最新推荐文章于 2025-07-18 11:48:46 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #C #C++ #C# #J# #ViewUI

javascript 专栏收录该内容

104 篇文章

订阅专栏

本文介绍如何使用JavaScript创建包含标题、表头、表体和表尾的HTML表格，并提供了遍历和操作这些元素的方法。

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

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