JSFiddle - React, Tailwind, and code Playground

by Antonin Loury

HTML

<div id="container">
<table id="matable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
<th>Comments</th><th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
<th>Comments</th></tr></thead>
<tbody>
<tr class="odd">
<td>47468</td>
<td>Sed Et</td>
<td>[email protected]</td>
<td>CONSETETUR</td>
<td>labore duo...</td><td>47468</td>
<td>Sed Et</td>
<td>[email protected]</td>
<td>CONSETETUR</td>
<td>labore duo...</td></tr>
<tr class="even">
<td>55553</td>
<td>Et Et</td>
<td>[email protected]</td>
<td>AT</td>
<td>diam amet...</td><td>47468</td>
<td>Sed Et</td>
<td>[email protected]</td>
<td>CONSETETUR</td>
<td>labore duo...</td></tr>
<tr class="odd">
<td>69593</td>
<td>Kasd Elitr</td>
<td>[email protected]</td>
<td>CONSETETUR</td>
<td>et gubergren...</td><td>47468</td>
<td>Sed Et</td>
<td>[email protected]</td>
<td>CONSETETUR</td>
<td>labore duo...</td></tr>
<tr class="even">
<td>94927</td>
<td>Elitr Dolores</td>
<td>[email protected]</td>
<td>AMET</td>
<td>sit takimata...</td><td>47468</td>
<td>Sed Et</td>
<td>[email protected]</td>
<td>CONSETETUR</td>
<td>labore duo...</td></tr>
<tr class="odd">
<td>66651</td>
<td>Ipsum Diam</td>
<td>[email protected]</td>
<td>IPSUM</td>
<td>diam kasd...</td><td>47468</td>
<td>Sed Et</td>
<td>[email protected]</td>
<td>CONSETETUR</td>
<td>labore duo...</td></tr>
<tr class="even">
<td>33199</td>
<td>Ipsum Diam</td>
<td>[email protected]</td>
<td>UT</td>
<td>sed rebum...</td><td>47468</td>
<td>Sed Et</td>
<td>[email protected]</td>
<td>CONSETETUR</td>
<td>labore duo...</td></tr>
<tr class="odd">
<td>19986</td>
<td>Justo Vero</td>
<td>[email protected]</td>
<td>ELITR</td>
<td>Lorem aliquyam...</td><td>47468</td>
<td>Sed Et</td>
<td>[email protected]</td>
<td>CONSETETUR</td>
<td>labore duo...</td></tr>
<tr class="even">
<td>57277</td>
<td class="tableFieldError">Consetetur Elitr</td>
<td>[email protected]</td>
<td>ELITR</td>
<td>sit invidunt...</td><td>47468</td>
<td>Sed...

CSS

#container{
    margin:20px;
    position:relative;
}

#matable{
    border-spacing:0;
    white-space:nowrap;
}
#matable td{
    border:solid grey 1px;
}
.tableFieldError{
    background-color:red;
}
.errorIcon{
    position:absolute;
    z-index:2;
    background-color:blue;
    width:5px;
    height:5px;
}

JavaScript

//declaration des variables
var ligneArray = [];

//pour chaque element de classe tableFieldError, recuperer la ligne
var errorArray = $(".tableFieldError");
console.log(errorArray);
$.each(errorArray, function(i,mtd){
   var ligne = $(mtd).parent("tr");
    //ajouter la ligne dans la liste si elle n'y est pas deja
    var trouve = false;
    $.each(ligneArray,function(j,mtr){
        trouve = mtr === ligne;
    });
    if (!trouve){
         ligneArray.push(ligne);   
    }
});
console.log(ligneArray);
//pour chaque ligne, ajouter l'icone en début de ligne.
var cont = $("#container");
if(typeof cont == "undefined")return false;

//si le container n'a pas la prop css relative, l'ajouter

var contTop = cont.offset().top;
var contLeft = cont.offset().left;

$.each(ligneArray,function(j,tr){
    var icon = $("<div>");
    icon.addClass("errorIcon");
    //coordonnées de la ligne par rapport au container
    icon.css({
        "top":$(this).offset().top - contTop - cont.scrollTop() +"px",
        "left":"-5px"
    });
    cont.append(icon);
});