使用 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 值的表中选择行的主要内容,如果未能解决你的问题,请参考以下文章