DOM操作表格

时间：2015-08-28 00:21:32 阅读：216 评论：0 收藏：0 [点我收藏+]

标签：

createElement()创建元素节点
setAttribute(‘属性名称‘,‘值‘)设置属性并赋值
insertRow(0)插入行
insertCell(0)插入单元格
appendChile()方法向节点的子节点列表的末尾添加新的节点。
createTextNode()创建文本节点



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作表格</title>
    <style>
        input, .tableContainer-1, .tableContainer-2 { margin: 20px;}
        table {text-align: center;}
    </style>
    <script>
    window.onload = function(){
        /*
        createElement()创建元素节点
        setAttribute(‘属性名称‘,‘值‘)设置属性并赋值
        insertRow(0)插入行
        insertCell(0)插入单元格
        appendChile()方法向节点的子节点列表的末尾添加新的节点。
        createTextNode()创建文本节点

        DOM创建表格的基本步骤：
        1,创建表格节点
        2,设置表格属性
        3,插入一行tr
        4,插入单元格td
        5,创建文本text
        6,将文本添加到td
        7,创建表格节点添加到body
        */



        // // 1,创建表格节点
        // var tableNode = document.createElement(‘table‘);

        // // 2,设置表格属性
        // tableNode.setAttribute(‘border‘,‘1‘);
        // tableNode.setAttribute(‘width‘,‘100%‘);

        // // 3,插入一行tr
        // var trNode = tableNode.insertRow(0);

        // // 4,插入单元格td
        // var tdNode = trNode.insertCell(0); 

        // // 5,创建文本text
        // var text = document.createTextNode(‘1‘);

        // // 6,将文本添加到td
        // tdNode.appendChild(text);

        // // 7,创建表格节点添加到body
        // document.body.appendChild(tableNode);



        // 循环创建10行10列表格
        function createTable1(){
            var tableNode = document.getElementsByTagName(‘table‘)[0];
            if (tableNode != undefined) {
                alert(‘表格已存在‘);
                return false;
            };
            var tableNode = document.createElement(‘table‘);
            tableNode.setAttribute(‘border‘, ‘1‘);
            tableNode.setAttribute(‘width‘, ‘500px‘);

            var num = 1;
            for (var i = 0; i < 10; i++) {
                var trNode = tableNode.insertRow(i);

                for (var j = 0; j < 10; j++) {
                    var tdNode = trNode.insertCell(j);
                    var txt = document.createTextNode(num++);
                    tdNode.appendChild(txt);
                };
            };
            
            document.getElementsByTagName(‘div‘)[0].appendChild(tableNode);
            
        }

        // 使用innerHTML创建表格
        function createTable2(){
            var tableNode = document.getElementsByTagName(‘table‘)[0];
            if (tableNode != undefined) {
                alert(‘表格已存在‘);
                return false;
            };

            var num=1;
            var tableHTML = ‘<table border=1 style="width:500px">‘;

            for(var i=0; i<10; i++){
                tableHTML+=‘<tr>‘;

                for(var j=0; j<10; j++){
                    tableHTML+=‘<td>‘;
                    tableHTML+=(num++);
                    tableHTML+=‘</td>‘;
                }

                tableHTML+=‘</tr>‘;
            }
            tableHTML+=‘</table>‘;
            
            document.getElementsByTagName(‘div‘)[1].innerHTML = tableHTML;
        }

        function deleteROW(){
            var tableNode = document.getElementsByTagName(‘table‘)[0];
            if (tableNode == undefined) {
                alert(‘请点击左边按钮创建表格后再删除!‘)
            }else if(tableNode.rows.length==0) {
                tableNode.parentNode.removeChild(tableNode);
            }else{
                tableNode.deleteRow(0);
            }
        }

        document.getElementsByTagName(‘input‘)[0].onclick = function(){
            createTable1();
        };
        document.getElementsByTagName(‘input‘)[1].onclick = function(){
            createTable2();
        };
        document.getElementsByTagName(‘input‘)[2].onclick = function(){
            deleteROW();
        };

        };
    </script>
</head>
<body>
<input type="button" value="创建10行10列表格">
<input type="button" value="使用innerHTML创建表格">
<input type="button" value="删除一行表格">
<div class="tableContainer-1"></div>
<div class="tableContainer-2"></div>
</body>
</html>

DOM操作表格

标签：

原文地址：http://www.cnblogs.com/jasontoyell/p/4764860.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行