JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/demo_table.css">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <thead> 
        <tr> 
            <th>Rendering engine</th> 
            <th>Browser</th> 
            <th>Platform(s)</th> 
            <th>Engine version</th> 
            <th>CSS grade</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr class="gradeX"> 
            <td>Trident</td> 
            <td>Internet
                 Explorer 4.0</td> 
            <td>Win 95+</td> 
            <td class="center">4</td> 
            <td class="center">X</td> 
        </tr> 
        <tr class="gradeC"> 
            <td>Trident</td> 
            <td>Internet
                 Explorer 5.0</td> 
            <td>Win 95+</td> 
            <td class="center">5</td> 
            <td class="center">C</td> 
        </tr> 
        <tr class="gradeA"> 
            <td>Trident</td> 
            <td>Internet
                 Explorer 5.5</td> 
            <td>Win 95+</td> 
            <td class="center">5.5</td> 
            <td class="center">A</td> 
        </tr> 
        <tr class="gradeA"> 
            <td>Trident</td> 
            <td>Internet
                 Explorer 6</td> 
            <td>Win 98+</td> 
            <td class="center">6</td> 
            <td class="center">A</td> 
        </tr> 
        <tr class="gradeA"> 
            <td>Trident</td> 
            <td>Internet Explorer 7</td> 
            <td>Win XP SP2+</td> 
            <td class="center">7</td> 
            <td class="center">A</td> 
        </tr> 
        <tr class="gradeA"> 
            <td>Trident</td> 
            <td>AOL browser (AOL desktop)</td> 
            <td>Win XP</td> 
            <td class="center">6</td>...

JavaScript

$("#example tbody").delegate("tr", "click", function() {
  var firstCellText = $("td:first", this).text();
  var fourthCellText = $("td:eq(3)", this).text();
    alert("First Cell: " + firstCellText + "\nFourth Cell: " + fourthCellText);
});

$('#example').dataTable( );