Select Row from table with JSON values using JQuery

user_9422805 0
Viewed 1495

I have JSON data from an MVC controller with the values

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

I have Displayed this JSON data into an HTML table using 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");
        }
    })
});

I'm Trying to select individual rows from the table when I click the particular row, it should display its value in the alert box But instead, it's displaying the entire table JSON data onClick. What correction should I make to this JQuery Function?

    $(document).ready(function () {

    $("#table1 tr").click(function () {
        debugger;
        $('.selected').removeClass('selected');
        $(this).parents('tr').addClass('selected');
    })
});
asp.net jquery json ajax javascript
2 Answers

As I understand your question, you want to display the selected row data, for this scenario, you can try like this

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

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

And in ajax success block you are declaring the variable as

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

Instead of this declare the 'source' variable as global variable and assign the json data to 'source' in ajax success block.

source = data;
user_104717010

If I understand your question correctly, then the solution is this:

 $(document).ready(function () {

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

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

By making the change above, this will cause only the row that the user clicks in #table1 (i.e. the row element corresponding to $(this) ) to have the selected class applied.

You are guaranteed to have $(this) inside of your click handler correspond to a table row element, seeing that the click handler is bound to tr elements via the #table tr selector. Hope this helps!

user_85267050
Related