JSFiddle - React, Tailwind, and code Playground

by houssamk

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css">
<table>
<tr linenumber="10">
    <td>one</td>
    <td>two</td>
    <td><a href="#" onclick="$(this).jqtest()">dialog</a></td>
</tr>
</table>

CSS

td {padding: 5px;}
span { color: red; }

JavaScript

(function($) {

    var defaults = {
        dataTableSelector: "poTable",

    };

    $.fn.extend({
        jqtest: function(opts) {
            if (this === window) {
                return defineSettings(opts);
            } else {


                $(this).each(function() {
                    var tr = $(this).closest("tr").clone();
                    $("<div/>").append(tr).append("<span>" + tr.attr("linenumber") + "</span>").dialog({
                        buttons: {
                            "Close": function() {
                                $(this).remove();
                            }
                        }
                    });
                });
                return this;
            }
        }
    });

    function defineSettings(opts) {
        var current = $(window).data("jqtest");
        if (!current) {
            var opts2 = $.extend({}, opts, defaults);
            $(window).data("jqtest", opts2);
            current = $(window).data("jqtest");
        }
        return current;
    }
})(jQuery);