使用 JQuery 从具有 JSON 值的表中选择行

Posted 2023-05-08

【中文标题】使用 JQuery 从具有 JSON 值的表中选择行

【英文标题】：Select Row from table with JSON values using JQuery

【发布时间】：2019-04-14 18:52:27

【问题描述】：

我有来自 MVC 控制器的 JSON 数据和值

["OperationName":"All","PrivilegeName":"Roles Crud","OperationName":"Read","PrivilegeName":"Roles Read Delete","OperationName":"Delete","PrivilegeName":"Roles Read Delete","OperationName":"Read","PrivilegeName":"Roles Update","OperationName":"Update","PrivilegeName":"Roles Update"]

我已使用 AJAX 将此 JSON 数据显示到 html 表中。

 $(document).ready(function () 
    //debugger;
    $.ajax(
        url: "/Home/GetOpPriv",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        data: "source=",
        dataType: "json",
        success: function (data) 
            var row = "";

            $.each(data, function (index, item) 
                row += "<tr id='trName_" + index + "'>";
                row += "<td id='td_OpName" + index + "'>" + item.OperationName + "</td>";
                row += "<td id='td_PrivName" + index + "'>" + item.PrivilegeName + "</td>";
                row += "<tr>";
            );

            $("#table1").html(row);

            console.log(data);
            var source = [];
            source.push(data);

            console.log(source);
        ,
        error: function (result) 
            alert("Error");
        
    )
);

当我单击特定行时，我正在尝试从表中选择单个行，它应该在警报框中显示其值 但相反，它在单击时显示整个表 JSON 数据。 我应该对这个 JQuery 函数进行什么更正？

    $(document).ready(function () 

    $("#table1 tr").click(function () 
        debugger;
        $('.selected').removeClass('selected');
        $(this).parents('tr').addClass('selected');
    )
);

【参考方案1】：

据我了解您的问题，您想显示选定的行数据，对于这种情况，您可以这样尝试

$("#table1 tr").click(function () 
    $('.selected').removeClass('selected');
    $(this).addClass('selected');

    var _index = $(this).attr("id").replace("trName_", "");
    var _currentSelectedRow = source[_index];
    console.log(_currentSelectedRow);
);

在 ajax 成功块中，您将变量声明为

var source = [];
source.push(data);

而不是将“源”变量声明为全局变量，并将 json 数据分配给 ajax 成功块中的“源”。

source = data;

【讨论】：

谢谢你。它工作得很好。但它不适用于页面加载。它在浏览器的控制台中运行良好。如何让它直接运行？

当我从 .click 函数中删除 tr 元素时，它可以工作但没有检测到 tr。像这样 $("#table1").click

您能详细说明您想要实现的目标吗？在页面加载时，您没有正确的点击事件！。

如果你点击表格 $("#table1").click();在这里你没有点击哪个 tr，而不是这个尝试 $("#table1 tr").click();你会得到 tr

当我保留 $("#table1 tr").click() 时，该函数没有被命中。它仅适用于浏览器控制台。

【参考方案2】：

如果我正确理解你的问题，那么解决方案是这样的：

 $(document).ready(function () 

    $("#table1 tr").click(function () 

        $('.selected').removeClass('selected');
        $(this).addClass('selected'); // remove .parents('tr')
    )
);

通过进行上述更改，这将仅导致用户在#table1 中单击的行（即与$(this) 对应的行元素）应用selected 类。

您可以确保点击处理程序中的$(this) 与表格行元素相对应，因为点击处理程序通过#table tr 选择器绑定到tr 元素。希望这会有所帮助！