如何使用Jquery" appendTo"来应用属性

时间:2016-06-24 22:19:52

标签: jquery html

我正在编写一个读取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");
});
});

1 个答案:

答案 0 :(得分:0)

尝试通过仅更改此行

来在适当的表格单元格中应用链接
$("<td class=link>").text(key).appendTo(ul);

用这个

$("<td class=link>").html("<a href=\"#\">"+key+"</a>").appendTo(ul);

更新了fiddle