JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<h1 style="text-decoration: underline;">1º Exercício</h1>
<table id="tabelaXpto">
   <tr id="first">
        <th id="nome">
            Nome
        </th>
        <th id="idade">
            Idade
        </th>
        <th id="nacionalidade">
            Nacionalidade
        </th>
        <th id="cidade">
            Cidade
        </th>
    </tr>
    <tr>
        <td>
            Ana
        </td>
        <td>
            32
        </td>
        <td>
            Espanhola
        </td>
        <td>
            Madrid
        </td>
    </tr>
    <tr>
        <td>
            Mariana
        </td>
        <td>
            5
        </td>
        <td>
            Brasileira
        </td>
        <td>
            São Paulo
        </td>
    </tr>
    <tr>
        <td>
            Simão
        </td>
        <td>
            5
        </td>
        <td>
            Suiça
        </td>
        <td>
            Zurique
        </td>
    </tr>
</table>

<br/>
<br/>
<br/>    
<h1 style="text-decoration: underline;">2º Exercício</h1>
<table id="tabelaYpto">
</table>

<br/>
<div id="button">Adicionar Linha</div>

<br/>
<br/>
<span style="font-weight: bold;">VALOR TOTAL (€):</span>
&nbsp;&nbsp;<input id="totalPremios" style="width:50px; padding-left:5px;" disabled type="text">

CSS

#tabelaXpto th
{
    cursor: pointer;
    background-color: #5A5A5A;
}

#tabelaXpto th:hover
{
    background-color: #7D7D7D;
}

#tabelaYpto th
{
    background-color: #5A5A5A;
}

#button
{
    color: white;
    border: 1px solid gray;
    background-color: gray;
    width: 94px;
    height: 18px;
    padding-left: 15px;
    padding-top: 6px;
    padding-right: 15px;
    padding-bottom: 3px;
    margin-left: 602px;
    cursor: pointer;
    font-size: 14px; 
}

#totalPremios
{
    width: 80px;
    height: 18px;
}

#button:hover
{
    background: #696767;
}

td input
{
    height: 24px;
    padding-left: 5px;
}

#tabelaXpto tr td
{
    height: 24px;
    padding-left: 10px;
}

JavaScript

//////////////////////////////////////////////////////////////////////////////
///////////////1ºEx - Para ordenar as colunas de numa tabela//////////////////
//////////////////////////////////////////////////////////////////////////////
//para se poder usar como o jquery
jQuery.fn.ordenarColunas = (
function()
{
    //debugger;
    var arrOrdenado = [].sort;
    return function(comparator, tabela)
    {
        tabela = tabela || function()
                           {
                               return this;
                           };
        //debugger;
        //para criar um array com o resultado 
        var placements = this.map(function()
                                  {    
                                      //apanhar trObject a ordenar
                                      var sortElement = tabela.call(this);
                                      //alert(sortElement.innerHTML);

                                      var noPai = sortElement.parentNode;
                                      //alert(noPai);
                                      var irmaoSeguinte = noPai.insertBefore(document.createTextNode(''), sortElement.nextSibling);
                                      
                                      return function() 
                                      {                                          
                                          //para inserir logo após o pai
                                          noPai.insertBefore(this, irmaoSeguinte);
                                          //remover
                                          noPai.removeChild(irmaoSeguinte);
                                      };
                                  });
       
        return arrOrdenado.call(this, comparator).each(function(i)
                                                       {
                                                           placements[i].call(tabela.call(this));
                                                     ...