DOM_节点操作创建表格

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_38168322

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量295

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangyinxu/p/7126667.html

版权

<html>
<head>
<style type="text/css">
table{
    border:#afccdd 1px solid;
    width;500px;
    border-collapse:collapse;
    }
table td{
    border:#afccdd 1px solid;
    padding:5px;
    }
</style>
</head>
<body>
<script type="text/javascript">
function cretable(){
    var hang = document.getElementsByName("hang")[0];
    var rownum = parseInt(hang.value);
    var lie = document.getElementsByName("lie")[0];
    var cellnum = parseInt(lie.value);
    var otabNode = document.createElement("table");
    for(var x =1;x<=hang.value;x++){
        var otrNode = otabNode.insertRow();
            for(var y =1;y<=lie.value;y++){
                 var otdNode = otrNode.insertCell();
                 otdNode.innerHTML="<font color='green'>java</font>";
                }
    }
    document.getElementsByTagName("div")[0].appendChild(otabNode);
    document.getElementsByName("cretab")[0].disabled=true; //按钮属性disabled=true使按钮只能执行一次就变灰
    
}
</script>
行：<input name="hang" type="text" value="" />
列：<input name="lie" type="text" value="" />
<input type="button" value="创建表格" name="cretab" onclick="cretable()"/>
<div></div>
</body>
</html>

思路：

1、创建html标签

2、编写css样式

3、创建table节点对象

4、创建tr节点对象

5、创建td节点对象（如果不适用table对象中的方法insertRow()；就需要产生关系；但是原理都一样）

6、将table节点对象加入到div标签中

<html>
<head>
    <style type="text/css">
 table{
     border:#ccff00 1px solid;
     color:#ccff00;
     background-color:#adddfa;
     }
    </style>
</head>
<body>
    <div></div>
    <input type="button" value="添加表格" name="but" onclick="cretable()"/>
    <script type="text/javascript">
    function cretable(){
        var tabNode = document.createElement("table");
        var tdyNode = document.createElement("tbody");
        var trNode = document.createElement("tr");
        var tdNode  = document.createElement("td");
        tdNode.innerHTML="javascript";
        trNode.appendChild(tdNode);
        tdyNode.appendChild(trNode);
        tabNode.appendChild(tdyNode);
        document.getElementsByTagName("div")[0].appendChild(tabNode);
    }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/wangyinxu/p/7126667.html

weixin_38168322

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM_节点操作创建表格

<html><head><style type="text/css">table{ border:#afccdd 1px solid; width;500px; border-collapse:collapse; }table td{ border:#afccdd 1px solid...
复制链接

扫一扫