如何编辑生成的html表

时间:2014-05-27 05:39:47

标签: javascript html dom html-table

我有一个函数可以获得一个json对象并将其转换为一个表。我的问题是如何编辑表的内容。例如,我希望在表中插入链接以具有href属性,并且图像描述为类似

的图像

这是我的函数,它在点击

上生成一个表
$.get("output-tv.php",{tv_type:tv_type,screen_size:screen_size,connectivity:connectivity,features:features},function(response){
            var i = 0;
            var table = document.getElementById("table")
            var row = table.insertRow(0);
            $("#table tr").remove(); 

                for(i=0; response.result.length-1 >= i ; i++ ){
                    var table = document.getElementById("table");
                    {
                        var row = table.insertRow(0);
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        var cell3 = row.insertCell(2);
                        var cell4 = row.insertCell(3);
                        var cell5 = row.insertCell(4);
                        var cell6 = row.insertCell(5);
                        cell1.innerHTML = response.result[i].product_code;
                        cell2.innerHTML = response.result[i].tv_name;
                        cell3.innerHTML = response.result[i].size;
                        cell4.innerHTML = response.result[i].tv_type;
                        cell5.innerHTML = response.result[i].link;
                        cell6.innerHTML = response.result[i].image;
                    }


                }   
            }, "json" );

1 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/C9N9E/

尝试这个小提琴,而不是使用JavaScript将行添加到表中,完全利用jquery。

$(document).ready(function () {
        debugger;
       // $("#myTable tr").remove();
        $(jsonObj.items).each(function () {
            var rowString = "<tr>";
            rowString += "<td>" + this.index + "</td>";
            rowString += "<td>" + this.name + "</td>";
            rowString += "<td><a href=" + this.Link + " >"+this.name+"</a></td>";
            rowString += "<td><img src='" + this.logo + "'  height='30' width='60'/></td>";
            rowString += "</tr>";
            $('#myTable').append(rowString);
        });

    });