前言
之前介绍的是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
谢谢您的阅读!