Query Using Java Script and display in Pageblock Table using custom html

Sometime we need to create table in visual force page with html elements with same look and feel as standard pageblocktable. So we did not need to add extra style class in html table. We can do it with the standard style classes.

the data to the pageblocktable will be queried from the javascript using sforce.execute.query

We need to do a little work to search the standard class name from pageblockTable and add those classes to custom html table:

As I have taken a simple example to show how to use the standard style class:

Visual Force page code:

<apex:page >
<style>
    tr.dataRow {
       background-color:white;
    }
    tr.dataRow:hover {
       background-color: #e3f3ff;
    };
</style>
<script type="text/javascript">
        var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
<script src="../../soap/ajax/31.0/connection.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = setupPage;
    function setupPage() {
           sforce.connection.query("Select Id,Name,BillingCity,BillingState from  Account 1000",
           {onSuccess : layoutResults,
              onFailure : queryFailed,
                  source : {
                         output : document.getElementById("output"),
                         startTime : new Date().getTime()
                     }
              });
 }
    function queryFailed(error, source) {
       source.output.innerHTML = "<font color 'red'>An error has occurred: </font> <p>" + error;
       }
       
                     
function layoutResults(queryResult, source) {

     if (queryResult.size > 0) {
     var output = "<table class='list' border='0' cellpadding='0' cellspacing='0'><tr class='headerRow'>";
         output +="<th class='headerRow'> Account Name</th><th class='headerRow'> Billing City </th><th class='headerRow'> Billing Country</th>";

     //get the records array
     var records = queryResult.getArray('records');

     //loop through the records and construct html string
     for (var i = 0; i < records.length; i++) {
          var account = records[i];
          output += "<tr class='dataRow'><td class='dataCell'>"+ account.Name + "</td><td class='dataCell'>" + account.BillingCity +
            "</td><td class='dataCell'>" + account.BillingState + "</td></tr>";
     }
        output =output+"</td></tr></table>"
     //render the generated html string
     source.output.innerHTML = output;
     }
}
</script>
<apex:pageBlock >
     <div id="output"  ></div>
</apex:pageBlock>

</apex:page>