Выберите строку из таблицы со значениями JSON, используя JQuery

Question

У меня есть данные JSON от контроллера MVC со значениями

[{"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"}]

Я отобразил эти данные JSON в таблицу HTML, используя AJAX.

 $(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');
    })
});

Answer 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);

Вместо этого объявите переменную 'source' как глобальную переменную и назначьте данные json 'source' в блоке успеха ajax.

source = data;

Answer 2

Если я правильно понимаю ваш вопрос, то решение таково:

 $(document).ready(function () {

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

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

При внесении изменения, приведенного выше, это приведет к тому, что в строке #table1 (то есть элементе строки, соответствующем $(this)) будет применена только строка, к которой применен класс selected.

Вам гарантировано, что $(this) внутри вашего обработчика кликов соответствует элементу строки таблицы, поскольку обработчик кликов связан с tr элементами с помощью селектора #table tr. Надеюсь, это поможет!