JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<body id="module_Alert">
<div id="pageheader" class="header"><div id="header-logo"><img src="../images/service2media_logo.png" alt="service2media"/><span id="productandversion"><span id="producthook"/><span id="versionhook"/></span></div><div id="header-menu"><div><a href="../refdoc/mainpage.html">Main</a></div><div><a href="../concepts_chapter.html">Concepts</a></div><div><a href="../refdoc_chapter.html">Modules</a></div><div><a href="../toc.html">Site map</a></div></div></div>
<h1 class="title title apiName luaName topictitle1"><tt class="ph tt">Alert</tt></h1>
<div class="body refbody apiDetail luaDetail"><p class="shortdesc">Alert provides an alert dialog.</p>
<div class="sectiondiv superclass"><p class="p">Superclass: <samp class="ph codeph"><a class="xref" href="module_m2activeobject.html" title="M2ActiveObject is the base class of all M2Active classes">M2ActiveObject</a></samp></p>
</div><div class="sectiondiv description"><p class="p">Alert displays an alert box containing one or more buttons.</p>
</div><div class="section section apiDesc luaFields fields"><table class="section section apiDesc luaFields fields"><tr class="pdentry pdentry plentry luaField"><th class="dt luaFieldName dlterm">Field name</th><th class="dt luaFieldType dlterm">Type</th><th class="dt luaFieldAccess dlterm">Access</th><th class="dt luaFieldDefault dlterm">Default</th><th class="dd luaFieldDescription dlterm">Description</th></tr><tr class="pdentry pdentry plentry luaField" id="module_Alert__module_Alert__field_title_string"><td class="dt luaFieldName">title</td><td class="dt luaFieldType codeph string">string</td><td class="dt luaFieldAccess">rw</td><td class="dt luaFieldDefault">""</td><td class="dd luaFieldDescription">The title of the Alert. This is shown above the message.</td></tr><tr class="pdentry pdentry plentry luaField" id="module_Alert__module_Alert__field_message_string"><td class="dt luaFieldName">message</td><td class="dt luaFieldType codeph string">string</td><td...

CSS

.luaFieldDescription {
    display:none;
}

.descriptionRow .luaFieldDescription {
    display: block;
    display: table-cell;
}

JavaScript

(function ($) {
    function layoutTable(table) {
        var $descriptionCell;

        $("tr", table).each(function (index, row) {
            if ($('th', row).length > 0) {
                return;
            }
            $descriptionCell = $(row).children('td.luaFieldDescription');
            $('<tr />')
                .addClass($(row).prop('className'))
                .addClass('descriptionRow')
                .append($descriptionCell.attr('colspan', 4))
                .insertAfter(row);
        });
    }

    function initTableLayouter() {
        var $tables = $("table.luaFields");
        $tables.each(function (index, table) {
            layoutTable(table);
        });
    }
    $(initTableLayouter);
}(jQuery));