表中每行的jQuery .data()

时间:2012-12-22 22:28:14

标签: jquery html-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');
    });
}

我上面的代码是从ajax返回的。 'obj'中有一堆JSON,我的代码循环遍历JSON的每个“行”,并使用jQuery通过.append()将“行”数据附加到表中。我想更进一步,并使用.data()存储每行ID的键值对。 JSON包含字段ID,该字段ID是自动递增的主键。我试图用.data()在每一行的JSON中存储该字段,以便以后通过另一个调用'.ajax'来检索。我相信你们中有很多人会对如何完成目标有一个更好的心理图像,所以我的意思是得到一些建议。我希望没关系。

1 个答案:

答案 0 :(得分:1)

您可以在创建新行时将数据添加到新行

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

然后再访问它:

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

})