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

Posted

技术标签:

【中文标题】使用 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 元素。希望这会有所帮助!

【讨论】:

以上是关于使用 JQuery 从具有 JSON 值的表中选择行的主要内容,如果未能解决你的问题,请参考以下文章

从具有相同值的两个表中选择数据后结果重复

如何从两个表中选择同一字段中具有相同值的行?

从具有特定值的表中获取列名

如何从具有多个页面的表中获取表记录?

用于从表中选择具有最新时间戳的行的 JOOQ 代码

Javascript - 来自具有“父”和“子”行的表中的 Json