JSFiddle - React, Tailwind, and code Playground

by Ersin Bilgin

HTML

<table class="table">
    <tr class="row-link" data-href="www.google.com">
    <td style="text-align: right;">
        <div class="btn-group">
            <button type="button" class="btn btn-default btn-xs">
                <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
            <input type="text">
            <input type="password">
            <input type="submit">
            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <a href="open">
                        <span class="glyphicon glyphicon-eye-open"></span> Open
                    </a>
                </li>
                <li>
                    <a href="close">
                        <span class="glyphicon glyphicon-eye-close"></span> Close
                    </a>
                </li>
            </ul>
        </div>
    </td>
</tr>
</table>

JavaScript

$('.table tr.row-link').each(function(){
    $(this).css('cursor','pointer').hover(
        function(){ 
            $(this).addClass('active'); 
        },  
        function(){ 
            $(this).removeClass('active'); 
        }).click( function(){ 
            document.location = $(this).attr('data-href'); 
        }
    );
});

$("button").on("click", function(e) {

    e.preventDefault();
    e.stopPropagation();
    
    ret

});