JQuery: November 2011

Friday, November 4, 2011

Draw table body function

<script type="text/javascript" language="javascript">
$(document).ready(function () {
var testID=1;
var testName="testing";
GetList();
});

function GetList() {
            $.ajax({
                type: "POST",
                url: "Test.aspx/GetAll",
                datatype: "json",
                data: "{'ID':'" + testID + "','Name':'" + testName + "'}",
                contentType: "application/json; charset=utf-8",
                success: function (xmldata) {
                    drawAgencyPending("tbltest", xmldata.d);
                }
            });
        }

        function drawTableBody(tableid, tabledata) {
            var table = document.getElementById(tableid);
            var tbodies = table.getElementsByTagName("tbody");
            var tablebody = tbodies[0];
            var tblhead = table.getElementsByTagName("thead");
            var tblhead = tblhead[0];
            var noofcolumns = tblhead.rows[0].cells.length;
            while (tablebody.rows.length > 0) {
                tablebody.deleteRow(0);
            }
            var found = false;
            $(tabledata).find("row").each(function () {
                found = true;
                var tablerow = document.createElement("TR");
                $(tablerow).click(function () {
                });
                $(tablerow).bind('', function () {
                });
                $(tablerow).bind('mouseover', function () {
                    $(tablerow).css("background", "gray")
                });
                $(tablerow).bind('mouseout', function () {
                    $(tablerow).css("background", "white")
                });
                $(tablerow).css("cursor", "pointer")
                $(this).find("column").each(function () {
                    var tablecell = document.createElement("TD");
                    $(tablecell).html($(this).text());
                    $(tablerow).append(tablecell);
                });
                $(tablebody).append(tablerow);
            });
            if (!found) {
                var tblrow = document.createElement("TR");
                var tblcell = document.createElement("TD");
                $(tblcell).attr("colspan", noofcolumns.toString());
                $(tblcell).css("text-align", "center");
                tblcell.innerHTML = "No Data Available";
                $(tblrow).append(tblcell);
                $(tablebody).html("");
                $(tablebody).append(tblrow);
            }
        }
</script>

inside body tag
<body>
<table>
<thead>
<tr>
<td>ID</td>
<td>Name</td>
</tr>
</thead>
<tbody></tbody>
<tfoot> </tfoot>
</table>
</body>

Subscribe to: Posts (Atom)