在html表中选择一行

时间:2016-04-20 23:40:49

标签: javascript jquery html dom

我正在尝试在我创建的表中选择一行,并且需要使用这些值。我遇到的问题是我在javascript中使用doms创建它并从存储过程中获取值然后填充表。

所以我使用一个带id的简单div -

 <div id="Tab1" class="tab-pane fade in active"></div>      

创建表并填充它我使用ajax调用 -

function GetcarData() {

$.ajax({
    type: "post",
    data: JSON.stringify({
        price: slidval,
    }),
    url: "/index.aspx/GetData",
    dataType: "json",
    contentType: "application/json",
    success: function (object) {
        responseData(object);
    },
    complete: function (object) {

    },
    error: function (object) {
    }
});
}
function responseData(object) {
    var stringed = JSON.stringify(object.d)
    var arr = JSON.parse(stringed);
    var i;
    var out = "<table id='table' class='table table-striped'>";
    var rowHeader = $("<tr></tr>").appendTo(out);
    out += "<td><font size='4'>Make</font></td>";
    out += "<td><font size='4'>Model</font></td>";
    out += "<td><font size='4'>Version</font></td>";
    out += "<td><font size='4'>Engine</font></td>";       
    out += "<td><font size='4'>(AV)Price new</font></td>";
    out += "<td><font size='4'>(Av)Price used</font></td>";
    out += "<td><font size='4'>Image</font></td>"

    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].Make +
        "</td><td>" +
        arr[i].Model +
        "</td><td>" +
        "£" + arr[i].version +
        "</td><td>"+
          arr[i].Engine_size +           
        "</td><td>" +           
        "£" + arr[i].price_new +
        "</td><td>" +
         "£" + arr[i].price_used +
          "</td><td><img src="+arr[i].image_url+" width='150' height='100'>" +             
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("Tab1").innerHTML = out;

}

现在我遇到的问题是我似乎无法选择一行。 我试过了

("#table tr").click(function(){
alert("selected");
});

但这没效果。

Anyhelp将不胜感激

1 个答案:

答案 0 :(得分:2)

您创建了一组在页面时不在DOM中的元素,并且仅在初始DOMContentLoaded之后添加

要侦听动态添加的元素上的事件,通过JavaScript DOM操作删除,您需要使用稍微不同的event侦听器。

$(document).on('%eventName%', '%selector%', function() { // do your stuff });