1. 程式人生 > >DOM動態生成表格

DOM動態生成表格

dom節點動態生成表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
        table{width: 500px;border:1px solid #ddd;border-collapse: collapse;}
        tr th,tr td{line-height: 35px;border: 1
px solid #ddd
;text-align: center;}
</style> </head> <body> <script> //1.首先建立表格 var tab=document.createElement('table'); //2.建立表格標題 var cap=document.createElement('caption'); cap.innerHTML="510宿舍學生調查表"; tab.appendChild(cap); var
tr=HreadTR(); tab.appendChild(tr); var tr1=createTR('1000','李龍飛',19); var tr2=createTR('1001','薛金燦',16); var tr3=createTR('1002','陳星傑',18); var tr4=createTR('1003','井含騰',17); var tr5=createTR('1004','劉璐璐',17); var tr6=createTR('1005'
,'李明陽',17); tab.appendChild(tr1); tab.appendChild(tr2); tab.appendChild(tr3); tab.appendChild(tr4); tab.appendChild(tr5); tab.appendChild(tr6); //建立表頭 行 function HreadTR(){ var tr=document.createElement('tr'); var th1=createTd('th',"編號",false); var th2=createTd('th',"名字",false); var th3=createTd('th',"年齡",false); var th4=createTd('th',"操作",false); tr.appendChild(th1); tr.appendChild(th2); tr.appendChild(th3); tr.appendChild(th4); return tr; } //建立普通表格 行 function createTR(id,name,age){ var tr=document.createElement('tr'); var td1=createTd('td',id,false); var td2=createTd('td',name,false); var td3=createTd('td',age,false); var td4=createTd('td','刪除',true); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); return tr;//把一行 返回給呼叫者 } //建立列 tagName是建立 tr/td 不確定用變數來代替 text表格裡的內容 isLink是判斷建立連結還是普通表格 function createTd(tagName,text,isLink){ //建立表頭 並且 建立普通表格 var th_td=document.createElement(tagName); if(isLink){//如果為真則建立超連結 var link=document.createElement('a'); link.href="#"; link.innerHTML=text; th_td.appendChild(link); }else{ th_td.innerHTML=text; } return th_td;//建立完之後 把表格返回給呼叫者 } //把表格加到body中 document.body.appendChild(tab);
</script> </body> </html>

仔細觀察後會發現,建立表頭的行和普通的行程式碼基本一樣。那麼程式碼還能優化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
        table{width: 500px;border:1px solid #ddd;border-collapse: collapse;}
        tr th,tr td{line-height: 35px;border: 1px solid #ddd;text-align: center;}
    </style>
    </head>
    <body>
        <script>
            //1.首先建立表格
            var tab=document.createElement('table');
            //2.建立表格標題
            var cap=document.createElement('caption');
            cap.innerHTML="510宿舍學生調查表";
            tab.appendChild(cap);

            //'th'  建立表頭行    true  
            var tr=createTR('th','編號','姓名','年齡','操作',true);
            tab.appendChild(tr);

            //建立普通行   
            var tr1=createTR('td','1000','李龍飛',19,'刪除',false);//傳入值
            var tr2=createTR('td','1001','薛金燦',16,'刪除',false);
            var tr3=createTR('td','1002','陳星傑',18,'刪除',false);
            var tr4=createTR('td','1003','井含騰',17,'刪除',false);
            var tr5=createTR('td','1004','劉璐璐',17,'刪除',false);
            var tr6=createTR('td','1005','李明陽',17,'刪除',false);
            //把行新增到表格裡
            tab.appendChild(tr1);
            tab.appendChild(tr2);
            tab.appendChild(tr3);
            tab.appendChild(tr4);
            tab.appendChild(tr5);
            tab.appendChild(tr6);

            //3.建立行  tagName決定是tr還是td,中間四個引數是決定一行的裡面的內容,isHead是否有超連結
            function createTR(tagName,id,name,age,op,isHead){
                //建立行
                var tr=document.createElement('tr');
                //列    前三列都是普通文字
                var td1=createTd(tagName,id,false);//呼叫建立列函式
                var td2=createTd(tagName,name,false);
                var td3=createTd(tagName,age,false);
                if(isHead){
                    var td4=createTd(tagName,op,false);//第四列  表頭內容 不是超連結
                }else{
                    var td4=createTd(tagName,op,true);//第四列  表格內容   是超連結
                }
                //把列放到行裡面
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                return tr;//返回給呼叫者一行資料
            }

            //4.建立列  text表格裡的內容  isLink是判斷建立連結還是普通表格
            function createTd(tagName,text,isLink){ 
                // tagName是建立 tr/td 不確定用變數來代替
                var th_td=document.createElement(tagName);
                if(isLink){//如果為真則建立超連結
                    var link=document.createElement('a');
                    link.href="#";
                    link.innerHTML=text;
                    link.onclick=function(){
                        if(confirm("是否刪除?")){
                            //當前是a a的父節點是td td的父節點是tr tr的父節點是table,表格刪除一行
                            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                        }
                    }
                    th_td.appendChild(link);
                }else{
                    th_td.innerHTML=text;
                }
                return th_td;//建立完之後  把表格返回給呼叫者
            }
            //把表格加到body中
            document.body.appendChild(tab);
        </script>
    </body>
</html>

寫了上面的例子,感覺引數的傳遞很重要。把變化的,不確定用變數來代替。那裡呼叫再傳入需要的值。不同的地方,傳入不同的值。
第一個塊程式碼囉嗦,重複的比較多。但是第二塊程式碼卻結構更加清晰。 一個函式一個功能。也體現了封裝的重要性,方便。牢記這種方式。
加油!!!