选择 html 表中的行

Selecting a row in a html table

本文关键字：html 选择      更新时间：2023-09-26

我正在尝试在我创建的表中选择一行，需要使用值。我遇到的问题是我在 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");
});

但这没有用。

任何帮助将不胜感激

您创建了一组元素，这些元素不在 DOM 中 when 页面，仅在初始DOMContentLoaded后添加

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

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

相关文章：