CODEWITHSUNDEEP
jqueryhtml-table
Eae
Eae

Reputation: 4321

jQuery .data() for each row in a table

success: function (output) {

    var obj = $.parseJSON(output);

    $("#existcustomers").empty();


    for (var iCnt = 0; iCnt < obj.length; iCnt++) {

        if (obj[iCnt].firstname == null) { obj[iCnt].firstname = ""; }
        if (obj[iCnt].lastname == null) { obj[iCnt].lastname = ""; }
        if (obj[iCnt].address1 == null) { obj[iCnt].address1 = ""; }
        if (obj[iCnt].address2 == null) { obj[iCnt].address2 = ""; }
        if (obj[iCnt].city == null) { obj[iCnt].city = ""; }
        if (obj[iCnt].state == null) { obj[iCnt].state = ""; }
        if (obj[iCnt].zip == null) { obj[iCnt].zip = ""; }
        if (obj[iCnt].phone == null) { obj[iCnt].phone = ""; }
        if (obj[iCnt].email == null) { obj[iCnt].email = ""; }
        if (obj[iCnt].cell == null) { obj[iCnt].cell = ""; }

        var newRow = $("<tr><td>" + obj[iCnt].firstname + "</td><td>" + obj[iCnt].lastname + "</td><td>" + obj[iCnt].address1 + "</td><td>" + obj[iCnt].address2 + "</td><td>" + obj[iCnt].city + "</td><td>" + obj[iCnt].state + "</td><td>" + obj[iCnt].zip + "</td><td>" + obj[iCnt].phone + "</td><td>" + obj[iCnt].email + "</td><td>" + obj[iCnt].cell + "</td></tr>");
        $("#existcustomers").append(newRow);
    }



    $("#existcustomers tr").hover(function () { $(this).addClass("highlight"); }, function () { $(this).removeClass("highlight"); });

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

        $("input#firstname").val($(this).children(":eq(0)").text());
        $("input#lastname").val($(this).children(":eq(1)").text());
        $("input#address1").val($(this).children(":eq(2)").text());
        $("input#address2").val($(this).children(":eq(3)").text());
        $("input#city").val($(this).children(":eq(4)").text());
        $("input#state").val($(this).children(":eq(5)").text());
        $("input#zip").val($(this).children(":eq(6)").text());
        $("input#phone").val($(this).children(":eq(7)").text());
        $("input#email").val($(this).children(":eq(8)").text());
        $("input#cell").val($(this).children(":eq(9)").text());

        $("input#firstname").attr('disabled', 'disabled');
        $("input#lastname").attr('disabled', 'disabled');
        $("input#address1").attr('disabled', 'disabled');
        $("input#address2").attr('disabled', 'disabled');
        $("input#city").attr('disabled', 'disabled');
        $("input#state").attr('disabled', 'disabled');
        $("input#zip").attr('disabled', 'disabled');
        $("input#phone").attr('disabled', 'disabled');
        $("input#email").attr('disabled', 'disabled');
        $("input#cell").attr('disabled', 'disabled');

        //Here a commit to session script for the current customer will
        // be aded. 

        //end 

        $('#form-main').css('background-color', 'green');
    });
}

I have the code above which is a return from an ajax. There is a bunch of JSON in 'obj' and my code loops through each "row" of the JSON and uses jQuery to append the "row" data to a table by way of .append(). I would like to take things a step further and store with .data() a key value pair for the ID of each row. The JSON contains a field ID which is an auto incremented primary key. I am trying to store that field from the JSON in each row with .data() for later retrieval by another call to '.ajax'. I am sure there are many of you out there that would have a much better mental picture of how to accomplish the goal so I mean to get some suggestions. I hope that is alright.

Upvotes: 0

Views: 4613

Answers (1)

charlietfl
charlietfl

Reputation: 171669

You can add data to your new row when you create it as follows

 var newRow = $("<tr>......</tr>").data('id',value);

Then later to access it:

$("#existcustomers tr").click(function(){
   var rowId=$(this).data('id');

})

Upvotes: 1

Related Questions