js--两个例子

末蓝、 2021-09-27 04:22 209阅读 0赞

# 前言 #

之前介绍的是JavaScript的基础知识，看多了自然就会乏味，所以在这里放上两个小例子，解解乏。

# 内容 #

### 1、由json对象创建一个table表格 ###

json格式的对象样子  
`｛name：“”，age：“”，sex：“”｝`

> 生成一个table，然后追加到body中，一开始就需要生成一个table，里面遍历json对象生成里面的tr，每一个json对象中的每一个成员（for-in）得到td标签

**步骤**

//1、生成table
        var table = document.createElement("table");
        table.border = "1";
        //2、得到json格式的对象
        var jsons = new Function( " return " + str ) ( );
        //3、循环这个数组
        for ( var I = 0 ; I < jsons.length ; i++){
            //4、生成每一个行，创建tr标签
            var tr = document.createElement ( " tr " ) ;
            //5、添加td，就需要遍历每一个对象中的成员
            //for ( var k in jsons[i] ){ 
                //6、创建td
                var td = document.createElement( " td " );
                td.appendChild(document.createTextNode(jsons[i][k]));
                //7、追加td
                tr.appendChild(td);
            }
            //循环结束，就得到一个行。将行追加到table
            table.appendChild(tr);
        }
        //将table加到body中
        document.getElementsByTagName("body")[0].appendChild(table);
        var _ =0;

## 2、无刷新评论 ##

> 在添加评论的时候，增加了评论之后页面不刷新，而自动更新评论。

onload = function(){ 
        var btn = J("btn");
        btn.onclick = function(){ 
        //获得用户输入
        var txt = J("txt").value;
        //创建p标签
        var p = document.createElement("p");
        //p.innerHTML = txt;
        p.appendChild(document.createTextNode(txt));
        //追加或插入
        /* //1 var ps = J("dv").getElementsByTagName("p"); if(ps.length > 0 ){ //插入 J("dv").insertBefore(p,ps[0]); }else{ j("dv").appendChild(p); } */
        //2
        var ps = J("dv").getElementsByTagName("p");
        new Function("p","ps",'J("dv").' + (ps[0] ? "insertBefore(p,ps[0])":"appendChild(p)"))();
            };
        };

# 总结 #

例子的灵活运用能让我们对技能的了解和掌握，所以例子对于学习来说非常重要。

# end #

谢谢您的阅读！