Wednesday, August 1, 2012

JQuery Table Column Count


The number of columns in a Table can be obtained using jQuery script as follows.
$("#tblEmployee tr").find('tr')[0].cells.length
This will count the number of cells in the first row and give the column count.

Example
Change the mapping of the jQuery file jquery-1.7.2.js and style sheet file Stylesheet.css to map to your local drive.

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head><title>
      jQuery Table
</title>
<
script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<
link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
// Add Table Style
$("#tblEmployee").addClass("Table");
//
// Add Table Cell Style
$("#tblEmployee td").addClass("TableCell");
//
// Add Header Style
$("#tblEmployee th").addClass("TableHeader");
//
      // Add Row Style
      $("#tblEmployee tr").addClass("TableRow");   
     
 //
      // Get Row Count
      var rowCount = "Total Rows: " + ($("#grdEmployee tr").length -   
      1).toString();
      document.getElementById("lblRowCount").innerText = rowCount;
      //
      // Get Column Count
      var columnCount = "Total Columns: " + 
      ($(
"#tblEmployee").find('tr')[0].cells.length).toString();
      document.getElementById("lblColumnCount").innerText = columnCount;  


</script>    
</head>
<body>
<table
        cellspacing="0"
        rules="all"
        border="1"
        id="tblEmployee"
        style="border-collapse:collapse;">
      <tr>
            <th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">DOB</th>
<th scope="col">Email</th>
      </tr>
<tr>                         
             <td>237</td>
             <
td>John</td>
             <
td>05/04/1981</td>
             <
td>john@abcsoftware.com</td>
</tr>
<
tr>       
       <td>238</td>
       <
td>Tom</td>
       <
td>11/11/1967</td>
       <
td>tom@abcsoftware.com</td>
      </tr>
<tr>         
             <td>239</td>
       <td>Harry</td>
             <
td>10/07/1973</td>
             <
td>harry@abcsoftware.com</td>
      </tr>
<tr>             
             <td>240</td>
             <
td>Peter</td>
             <
td>01/01/1981</td>
             <
td>peter@abcsoftware.com</td>
</tr>
<
tr>
<td>241</td>
<
td>John</td>
<
td>05/04/1981</td>
<
td>john@abcsoftware.com</td>
      </tr>
</table>
<span id="lblRowCount" class="Label"></span>
<
span id="lblColumnCount" class="Label"></span>
</body>
</html>

Add your Table (or) add server side code to populate the Table with data.

Stylesheet.css

.Table
{
      border: 1px solid #000000;
}
.TableCell
{
    padding: 3px 3px 3px 3px; /* Cellpadding */
    border: 1px solid #000000;
    font-family:Verdana;
    font-size:10pt;   
}
.TableCellEven
{
    padding: 3px 3px 3px 3px;
    border: 1px solid #000000;
    background-color:#ffffcc;
    font-family:Verdana;
    font-size:10pt;    
}
.TableCellOdd
{
    padding: 3px 3px 3px 3px;
    border: 1px solid #000000;
    background-color:#fedcba;
    font-family:Verdana;
    font-size:10pt; 
}
.TableHeader
{
      background-color:#999966;
}
.TableRow
{
    background-color:#ffffcc;
}
.TableRowEven
{
    background-color:#ffffcc;
}
.TableRowOdd
{
    background-color:#FEDCBA;
}
.TableRowHover
{
    background-color:#CCCCCC;
}
.TableRowSelected
{
    background-color:#CC99FF;
}


Search Flipkart Products:
Flipkart.com

No comments: