js--两个例子

前言

之前介绍的是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

谢谢您的阅读!

猜你喜欢

转载自blog.csdn.net/luojun13class/article/details/81091846