JSFiddle - React, Tailwind, and code Playground

by Trolstover

HTML

<table style="width:100%" id="table">
    <tr class="lol">
        <td class="minus">Jill</td>
        <td class="minus">Jilla</td>
        <td class="minus">50</td>
    </tr>
    <tr class="lol">
        <td class="minus">Eve</td>
        <td class="minus">Jackson</td>
        <td class="minus">94</td>
    </tr>
</table>

CSS

.hidden {
    display:none;
    opacity:0;
}
.bodky {
    opacity:1;
    display:inline
}
td {
    cursor:pointer
}

JavaScript

var lol = document.getElementsByClassName("lol");
 var kek = [];

 function matej() {
     var self = this;

     self.children = lol;
     self.before = [];
     self.after = [];




     self.shortIt();

     self.nahrada();
     self.animacia();

 }

 matej.prototype.shortIt = function () {
     Array.prototype.forEach.call(this.children, function (element) {
         Array.prototype.forEach.call(element.children, function (td) {
             var range = document.createRange();
             var span = document.createElement("span");
             span.setAttribute("class", "hidden");
             range.setStart(td.childNodes[0], 1);
             range.setEnd(td.childNodes[0],
             td.childNodes[0].length);
             range.surroundContents(span);

         });
     });
 };


 matej.prototype.nahrada = function () {
     var skryty = document.getElementsByClassName("hidden");
     Array.prototype.forEach.call(skryty, function (element) {
         var span = document.createElement("span");
         var y = document.createTextNode("...");
         span.appendChild(y);
         span.setAttribute("class", "bodky");
         var tato = element.parentNode;
         tato.insertBefore(span, element);

     });
 };


 matej.prototype.animacia = function () {

     var tab = document.getElementById("table");
     var x = tab.querySelectorAll(".lol td");

     for (var i = 0; i < x.length; i++) {
         x[i].onclick = this.john;
     }
 }






 function ali(e, x, y, t) {
     e = e ? e : window.event;
     this.zmen = t;
     var hore = 0;
     this.vyvolavac = e.currentTarget;
     this.zavri;
     this.id = function () {

         x.style.opacity = 1 - hore;
         hore += 0.05;
         if (hore < 1) {
             setTimeout(function () {
                 id();
             }, 10);
         } else {

             x.style.opacity = 0;
             x.style.display = "none";
             this.zavri = (function (e) {
                 e = e ? e :...