JSFiddle - React, Tailwind, and code Playground

by Jens Schyma

HTML

<!-- EBIL Rechner Demo Anwendung-->
<table>
    <tr class="head_row">
        <td></td>
        <td>Bezeichnung</td>
        <td>&nbsp;</td>
        <td align="right">Feldnr.</td>
        <td align="right">Vorjahreswerte<br/>Stichtag 31.12.2013</td>
        <td align="right">Betrag<br/>Stichtag 31.12.2014</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
    </tr>
        <tr class="zeile v1">
            <td></td><td>gezeichnetes Kapital</td>
            <td></td>
            <td>000100</td>
            <td class="vorgaenger"><input id="id_v_1" value="123.000"/></td>
            <td><input id="id_1" value="100.000"/></td>
            <td><button>D</button><button>N</button><button>K</button></td>
            <td></td>
        </tr>
    <tr class="zeile v2">
            <td></td><td>Kapitalrücklage</td>
            <td></td>
            <td>000200</td>
            <td><input id="id_v_2" value="12.000"/></td>
            <td><input id="id_2" value="11.000"/></td>
            <td><button>D</button><button>N</button><button>K</button></td>
            <td></td>
        </tr>
    <tr class="zeile v1">
            <td></td><td>Gewinnrücklagen</td>
            <td></td>
            <td>000300</td>
            <td><input id="id_v_3" value="1.000"/></td>
            <td><input id="id_3" value="2.000"/></td>
            <td><button>D</button><button>N</button><button>K</button></td>
            <td></td>
        </tr>
    <tr class="zeile v2">
            <td></td><td>Eigene Anteile</td>
            <td></td>
            <td>000400</td>
            <td><input id="id_v_4" value="1.000"/></td>
            <td><input id="id_4" value="2.000"/></td>
            <td><button>D</button><button>N</button><button>K</button></td>
            <td></td>
        </tr>
    <tr class="zeile v1">
            <td></td><td>Sonstiges Haftkapital</td>
            <td></td>
            <td>000500</td>
            <td><input id="id_v_5" value="1.000"/></td>
    ...

CSS

.head_row{
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 10pt;
    background-image:linear-gradient(to top, rgba(246, 246, 246, 1) 0%, rgba(225, 225, 225, 1) 50%);
}
.zeile{
    font-family: arial,helvetica,sans-serif;
    font-size: 10pt;
    
}
.v1{
    background-color: rgba(246, 246, 246, 1);
}
.v2{
    background-color: rgba(225, 225, 225, 1);
}

JavaScript

// EBIL Rechner
var toPublish = function(){
function MyRechner(){
    /*CHECK*/
    var isinDetailDLG=$(".text_b2").length>0;
    var getDesc = function(el){
        try{
        if(isinDetailDLG){
            return $($($(el).parent().parent().children()[0]).children()[0]).val();
        }else{
             return $($(el).parent().parent().children()[1]).text().replace(/\s/g,"");
        }
        }catch(e){
         return "";   
        }
    };
	/*CSS*/
	var css = "";
    css = ".myrechner_added{border-bottom-color:blue;}#myrechn_dlg{position:fixed;top:50px;right:20px;width:180px;height:200px;border-radius: 4px;padding: 5px;background-color: rgb(235, 235, 235);box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.26);}.myre_pos_div{font-size: 10pt;overflow: auto;background-color:white;width:160px;height:120px;}#myre_result{background-color:rgb(197, 195, 195);height:20px;text-align:right;font-weight: bold;}.myre_pos_div td:nth-child(3){text-align:right;} .myre_pos_div td:nth-child(4){font-size: 9pt}";
	var c=document.createElement("style");
	$(c).attr("type","text/css").attr("id","myre_css").html(css);
	$("head").append(c);
    /*DLG*/
    var dlg=document.createElement("div");
    $(dlg).attr("id","myrechn_dlg");
    $("body").append(dlg);
    var table=document.createElement("table");
    var pos_div=document.createElement("div");
    var detail_pos_table = document.createElement("table"); $(table).append($(document.createElement("tr")).append($(document.createElement("td")).append($(pos_div))));
    $(pos_div).addClass("myre_pos_div").append(detail_pos_table);
    $(dlg).append(table);
    var method = document.createElement("button");
    $(method).text("Plus").click(function(){
        window.myre_method_plus=!window.myre_method_plus;
        $(method).text(window.myre_method_plus?"Plus":"Minus");
    });
    window.myre_method_plus=true;
    var clear = document.createElement("button");
    $(clear).text("Clear").click(function(){
      ...