JSFiddle - React, Tailwind, and code Playground

by Bryson Murray

HTML

<table>
<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td class='clickable-col'>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td>
        <td>1234567</td>
        <td>£800,000</td>
    </tr>
</tbody>
</table>
<div id="Green">green</div>
<div id="table">hi </div>

JavaScript

$(function($){

    	$.fn.greenifier = function() {
    		this.css( "color", "green" );
    	};
    
    	$.fn.greenify = function( options ) {

    		// This is the easiest way to have default options.
    		var settings = $.extend({
    			// These are the defaults.
    			color: "#556b2f",
    			backgroundColor: "black"
    		}, options );

    		// Greenify the collection based on the settings variable.
    		return this.css({
    			color: settings.color,
    			backgroundColor: settings.backgroundColor
    		});
    		//       return this;

    	};
        
        $.fn.appendHtml = function(newHtml) {
		    this.html(this.html() + newHtml);
		    return this;
    	}

    	$.fn.ScrollTable = function(  ) {

    	//     this.each(function() {
    	//         // Do something to each element here.
    	//     });
          
            //this.innerHTML = "<tbody><tr class='clickable' data-href='url://link-for-first-row/'>       <td class='clickable'>Blah Blah</td>        <td>1234567</td>        <td>£158,000</td>    </tr>    <tr class='clickable-row' data-href='url://some-other-link/'>        <td>More money</td>        <td>1234567</td>        <td>£800,000</td>    </tr></tbody>";
            
            this.html("<tbody><tr class='clickable' data-href='url://link-for-first-row/'>       <td class='clickable'>Blah Blah</td>        <td>1234567</td>        <td>£158,000</td>    </tr>    <tr class='clickable-row' data-href='url://some-other-link/'>        <td>More money</td>        <td>1234567</td>        <td>£800,000</td>    </tr></tbody>");
            
            $(".clickable").click(function(event) {
                event.stopPropagation();
                alert(event.currentTarget.textContent);
                // window.document.location = $(this).data("href");
            });   
    	    return this;
    	 };

}( jQuery ));

$('#Green').greenifier();
$('#Green').appendHtml(" super...