jQuery Table Tutorial

jQuery provides a number of useful client side functionalities on Table like Style, Row count, Column count, Search, Filter etc

In the following example I have tried to cover all the possible scenarios which we come across while using a Table.

Here is the example

<html xmlns="http://www.w3.org/1999/xhtml" >

jQuery Table

</title>

$(document).ready(function() {

// Add Table Style

$("#tblEmployee").addClass("Table");

// Add Table Style

$("#tblEmployee td").addClass("TableCell");

// Add Cell Style

$("#tblEmployee td").filter(":even").addClass("TableCellEven");

$("#tblEmployee td").filter(":odd").addClass("TableCellOdd");

// Add Header Style

$("#tblEmployee th").addClass("TableHeader");

// Add Row Style

$("#tblEmployee tr").addClass("TableRow");

// Add Alternating Row Style

$("#tblEmployee tr").filter(":even").addClass("TableRowEven");

$("#tblEmployee tr").filter(":odd").addClass("TableRowOdd");

// Add Row Hover Style

// MouseOver

$("#tblEmployee tr").mouseover(function() {

$(this).addClass("TableRowHover");

})

// MouseLeave

$("#tblEmployee tr").mouseleave(function() {

$(this).removeClass("TableRowHover");

})

// Get Row Count

var rowCount = "Total Rows: " + ($("#tblEmployee 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;

// Client Side Search

// Get the search Key from the TextBox

// Iterate through the 2nd Column.

// td:nth-child(2) - Filters only the 2nd Column

// If there is a match show the row [$(this).parent() gives the Row]

// Else hide the row [$(this).parent() gives the Row]

$('#cmdSearch').click(function(event) {

event.preventDefault();

var searchKey = $('#txtName').val().toLowerCase();

$("#tblEmployee tr td:nth-child(2)").each(function() {

var cellText = $(this).text().toLowerCase();

if (cellText.indexOf(searchKey) >= 0) {

$(this).parent().show();

}

else {

$(this).parent().hide();

}

});

// Client Side Search (Autocomplete)

// Get the search Key from the TextBox

// Iterate through the 1st Column.

// td:nth-child(1) - Filters only the 1st Column

// If there is a match show the row [$(this).parent() gives the Row]

// Else hide the row [$(this).parent() gives the Row]

$('#txtID').keyup(function(event) {

var searchKey = $(this).val().toLowerCase();

$("#tblEmployee tr td:nth-child(1)").each(function() {

var cellText = $(this).text().toLowerCase();

if (cellText.indexOf(searchKey) >= 0) {

$(this).parent().show();

}

else {

$(this).parent().hide();

}

});

// Clear Search

// Clear the Search textbox

// Iterate through all the rows

// Set the visibility of all the rows to Show()

$('#cmdClear').click(function(event) {

event.preventDefault();

$('#txtName').val('');

$("#tblEmployee tr").each(function() {

$(this).show();

});

// Get Row Count

$('#cmdGetRowCount').click(function(event) {

event.preventDefault();

var rowCount = "Total Rows: " + ($("#tblEmployee tr").length - 1).toString();

alert(rowCount);

});

// Get Column Count

$('#cmdGetColumnCount').click(function(event) {

event.preventDefault();

var columnCount = "Total Columns: " + ($("#tblEmployee").find('tr')[0].cells.length).toString();

alert(columnCount);

});

// Loop Through a Specific Column (Names)

// Column index starts with 1

$('#cmdGetNames').click(function(event) {

event.preventDefault();

$("#tblEmployee tr td:nth-child(2)").each(function() {

alert($(this).text());

});

// Loop Through a Specific Row (2nd Row)

// Column index starts with 0

$('#cmdRow2').click(function(event) {

event.preventDefault();

$("#tblEmployee tr:nth-child(3) td").each(function() {

alert($(this).text());

});

$("#tblEmployee tr").click(function(event) {

// Check if Row is already Selected

if ($(this).hasClass('TableRowSelected')) {

// If selected, un-Select row

$(this).removeClass("TableRowSelected");

}

else {

// If not selected, Select row

$(this).addClass("TableRowSelected");

}

});

// Get Selected Row Cell Values

$("#tblEmployee tr").click(function(event) {

alert("Row Clicked");

alert($(this).index());

var ID = $(this).find("td:nth-child(1)").html();

var Name = $(this).find("td:nth-child(2)").html();

alert('ID: ' + ID + '\nName: ' + Name);

});

</script>

</head>

<body>

<table>

<tr>

<td>

Search Name:

</td>

</tr>

<tr>

<td>

Search ID (Autocomplete):

</td>

</tr>

<td>

<div>

<tr>

<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>

       <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>

</div>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

Get Row Count:

</td>

</tr>

<tr>

Get Column Count:

</td>

</tr>

<tr>

Loop Through a Specific Column (Names):

</td>

</tr>

<tr>

Loop Through a Specific Row (2nd Row):

</td>

</tr>

</table>

</form>

</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;

}

C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Thursday, August 2, 2012

jQuery Table Tutorial

No comments:

Blog Archive

About Me