JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<h2>Shakespeare's Plays</h2>

<table>
    <tr>
        <td>As You Like It</td>
        <td>Comedy</td>
        <td></td>
    </tr>
    <tr>
        <td>All's Well that Ends Well</td>
        <td>Comedy</td>
        <td>1601</td>
    </tr>
    <tr>
        <td>Hamlet</td>
        <td>Tragedy</td>
        <td>1604</td>
    </tr>
    <tr>
        <td>Macbeth</td>
        <td>Tragedy</td>
        <td>1606</td>
    </tr>
    <tr>
        <td>Romeo and Juliet</td>
        <td>Tragedy</td>
        <td>1595</td>
    </tr>
    <tr>
        <td>Henry IV, Part I</td>
        <td>History</td>
        <td>1596</td>
    </tr>
    <tr>
        <td>Henry V</td>
        <td>History</td>
        <td>1599</td>
    </tr>
</table>

<h2>Shakespeare's Sonnets</h2>

<table>
    <tr>
        <td>The Fair Youth</td>
        <td>1–126</td>
    </tr>
    <tr>
        <td>The Dark Lady</td>
        <td>127–152</td>
    </tr>
    <tr>
        <td>The Rival Poet</td>
        <td>78–86</td>
    </tr>
</table>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li class="third-item">list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

CSS

tr {
    background-color: #fff;
}
.alt {
    background-color: #ccc;
}
.highlight {
    background-color : yellow;
}

JavaScript

$(document).ready(function ($) {
    console.log();
    //$('tr:even').addClass('alt');
    //$('td:contains(Henry)').addClass('highlight');    
    //$('tr:nth-child(odd)').addClass('alt');
    //$('td:contains(Henry)').nextAll().addClass('highlight');
    //$('td:contains(Henry)').nextAll().addBack().addClass('highlight');
    //$( "li.third-item" ).nextAll().addBack().css( "background-color", "red" );
    $('td:contains(Henry)').parent().children().addClass('highlight');
    $('ul li').attr({        
        id: function (index, oldValue) {
            return 'wikilink-' + index;
        }
    });
    $('<a href="#top">back to top</a>').insertAfter('table');
    $('<a id="top"></a>').prependTo('body');
});