JSFiddle - React, Tailwind, and code Playground

by neerajdotname

HTML

<br />
<div><h1>Market Capitalization</h1></div>
<div>
    <table>
        <tr id='msft'>
            <td class='column1'><a href='http://www.microsoft.com'>Microsoft</a></td>
            <td class='column2'>MSFT</td>
            <td class='column3'>210.90 B</td>
        </tr>
        <tr class='sfo' id='orcl'>
            <td class='column1'><a href='http://wwww.oracle.com'>Oracle</a></td>
            <td class='coumn2'>ORCL</td>
            <td class='column3'>173.17 B</td>
        </tr>    
        <tr class='sfo' id='csco'>
            <td class='column1'><a href='http://www.cisco.com'>Cisco</a></td>
            <td class='column2'>CSCO</td>
            <td class='column3'>92.40 B</td>
        </tr>   
        <tr class='sfo' id='goog'>
            <td class='column1'><a href='http://www.google.com'>Google</a></td>
            <td class='column2'>GOOG</td>
            <td class='column3'>170.48 B</td>
        </tr>    
        <tr class='sfo' id='aapl'>
            <td class='column1'><a href='http://www.apple.com'>Apple</a></td>
            <td class='column2'>AAPL</td>
            <td class='column3'>321.66 B</td>
        </tr>   
    </table>
</div>

CSS

.highlight { background: yellow; }
h1 {font-weight:bold;margin-bottom:10px;font-size:24px;}
table{ width:100%}
table tr td {padding:5px;}

JavaScript

$('table').children().delegate('a', 'click', function(){
  alert($(this).text());
  return false;
});

s = "<tr class='sfo' id='intc'><td class='column1'><a href='http://www.intel.com'>Intel</a></td><td class='column2'>INTC</td><td class='column3'>313.94 B</td></tr>"
  
$('table').append(s);