js动态创建table

最新推荐文章于 2023-03-21 17:56:29 发布

简单的绿竹

最新推荐文章于 2023-03-21 17:56:29 发布

阅读量891

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/zunguitiancheng/article/details/8988204

版权

JS 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用tbody标签来来消除浏览器兼容性的问题</title>

                var td2 = document.createElement("td"); //创建td标签
                td2.innerHTML = "<a href='" + value + "'>" + value + "</a>"; //把网站地址赋值给标签的innerHTML属性
                tr.appendChild(td2); //把上面武装好的td标签也添加到tr标签里面去

                tablelinks.tBodies[0].appendChild(tr); //修改后，通过table标签下面的tBodies属性，把上面准备好的tr标签添加到table标签里面去
            }
        }

        //动态创建表格没意义，是为了后面的ajax效果做准备的

function loadData2() {
var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "谷歌": "http://www.google.com" }

var tableLinks2 = document.getElementById("tableLinks2");
for (var key in data) {//遍历数组

var value = data[key];//得到网站的名称，联想web服务器中使用的字典的样式一样来使用的存储数据的感觉

var tr = tableLinks2.insertRow(-1); //在表格最后插入一行，并且返回插入行的对象，联想winform中的TreeNode node=treeNode.AddNode("hello")

var td1 = tr.insertCell(-1);//在tr中增加一个td，并且返回增加的td，然后铁td中放入内容

td1.innerText = key;//fireFox浏览器里面是不支持innerText属性，所以才强调要使用jquery啊

                var td2 = tr.insertCell(-1);
                td2.innerHTML = "<a href='"+value+"'>"+value+"</a>";//这一部分还可以使用createElement来完成
            }
        }

//准备三个函数
function fun1() {

alert("fun1");
}

        function fun2(){
            alert("fun2")
        }

        function fun3() {
            alert("fun3");
        }

</script>
</head>
<body οnlοad="fun1(), fun2(), fun3()">
    <table id="tableLinks">
        <tbody></tbody>
        
    </table>

    <table id="tableLinks2">

    </table>

</body>
</html>