Saturday, June 11, 2011

Appending Dynamic Rows to a a table using JQuery

Here is piece of code I came across that is useful when we need to append dynamic content to a HTML table using JQuery.


function fuGetRoolListOnSuccessCallBack(args) {
    var table = $("#tblRoomList");
    table.html("");

    var TR = document.createElement("TR");
    var TH = document.createElement("TD");
    $(TR).appendTo(table);
    $(TH).appendTo(TR)
                    .html("RoomID");
    TH = document.createElement("TH");
    $(TH).appendTo(TR)
                    .html("RoomName");
    TH = document.createElement("TH");
    $(TH).appendTo(TR)
                    .html("MaxUser");
    TH = document.createElement("TH");
    $(TH).appendTo(TR)
                    .html("CurrentUser");
    TH = document.createElement("TH");
    $(TH).appendTo(TR)
                    .html("Join");

    $(args).each(function (i) {
        var tr = document.createElement("TR");
        var td = document.createElement("TD");
        $(tr).appendTo(table);
        $(td).appendTo(tr)
                    .html(this.RoomID);
        td = document.createElement("TD");
        $(td).appendTo(tr)
                    .html(this.RoomName);
        td = document.createElement("TD");
        $(td).appendTo(tr)
                    .html(this.MaxUser);
        td = document.createElement("TD");
        $(td).appendTo(tr)
                    .html("<span id='_cu_" + this.RoomID + "'>" + this.CurrentUser + "</span>");
        td = document.createElement("TD");
        $(td).appendTo(tr)
                    .html("<input type='button' value='Join' onclick=\"fnJoinChatRoom('" + args[i].RoomID + "')\" />");
    });

    CloseMessageBox();
}

// Join one chat room
function fnJoinChatRoom(roomid) {
    ShowMessageBox("Joining Chat Room", "Joining Chat Room");
    csaspnetajaxwebchat.transition.JoinChatRoom(
                roomid,
                $("#txtAlias").val(),
                fnJoinChatRoomOnSuccessCallBack);
}
function fnJoinChatRoomOnSuccessCallBack(args) {
    CloseMessageBox();
    if (args != null) {
        var chatbox = new WebChat.ChatBox();
        chatbox.open(args.RoomID, args.RoomName);
    }
    else {
        ShowMessageBox("Error", "Arguments is error: ChatRoomID!");
    }
}

Courtsey: Codeplex.com

No comments:

Post a Comment