我正在编写一个读取JSON数据的代码,然后使用appendTo创建一个表。我正在尝试应用属性&#34; href&#34;到<td>
表字段。我尝试了多种方法,但我无法在生成的html代码中看到href。
我想在生成的代码中尝试这样的东西:
<td><a href="#"> key1</a></td
生成此类代码的最佳方法是什么?
http://jsfiddle.net/charles30hk/b3cqtnur/
var data = {"key1":{"key11":"value11",
"key12":"value12"},
"key2":"value2",
"key3":"value3",
"key4":"value3",
"key5":{"key51":"value11",
"key52":"value12",
"key53":{"key531":"value","key52":"value12"},
},
};
function loop(obj, ul,nested=0) {
$.each(obj, function(key, val) {
if($.isPlainObject(val)) {
//$("<tr>").appendTo(ul)
for (i=0;i<nested;i++) {
$("<td>").append().appendTo(ul)
}
$("<td class=link>").text(key).appendTo(ul)
//$("td").last().attr("href","#")
/*var ul2 = $("<td>").text("hello").appendTo(
$("<tr>").appendTo(ul)
); */
//var u12 = $("<tr>").appendTo(ul)
if (i==0){
$("<tr class=parent>").appendTo(ul)
} else{
$("<tr>").appendTo(ul)
}
//$("<td>").appendTo(ul)
loop(val, ul,nested+1);
} else {
//$("<tr>").appendTo(ul)
for (i=0;i<nested;i++) {
$("<td>").appendTo(ul)
}
$("<td>").text(key).appendTo(ul)
//ul+="<td>"+key+"</td>"
$("<td>", {
id: key
}).text(val).appendTo(ul);
if (i==0){
$("<tr class=parent>").appendTo(ul)
} else{
$("<tr>").appendTo(ul)
}
}
});
}
$(function(){
$("#products").on("click","a",function(e) {
e.preventDefault();
$(this).closest("tr").nextUntil(".parent").toggleClass("open");
});
});
答案 0 :(得分:0)
尝试通过仅更改此行
来在适当的表格单元格中应用链接$("<td class=link>").text(key).appendTo(ul);
用这个
$("<td class=link>").html("<a href=\"#\">"+key+"</a>").appendTo(ul);
更新了fiddle