JSFiddle - React, Tailwind, and code Playground

by femfoyou

HTML

<div id="resultado" class="resultado"></div>

CSS

table, td, th {    
    border: 1px solid #ddd;
    text-align: left;
}
table {
    border-collapse: collapse;
    width: 45%;
    margin: 0 auto;
}
table a {text-decoration: none;}
th, td {padding: 5px;}

JavaScript

var pokedex = [
    {id: 1,id2: 001, name:'bulbasaur', type1:'grass', type2:'poison',cpmax:981,atk:118,def:118,hpa:90,eggiv:560},
    {id: 2,id2: 002, name:'ivysaur', type1:'grass', type2:'poison',cpmax:1.552,atk:151,def:151,hpa:120,eggiv:886},
    {id: 3,id2: 003, name:'venusaur', type1:'grass', type2:'poison',cpmax:2.568,atk:198,def:198,hpa:160,eggiv:''},
    {id: 4,id2: 004, name:'charmander', type1:'fire', type2:'',cpmax:831,atk:116,def:96,hpa:78,eggiv:475},
];

var poke = '<table class="tablesorter responsive-on-mobile pokemon-list tablesorter-default" role="grid"><tbody>';

for (i = 0; i < pokedex.length; i++) {
	
  poke +='<tr role="row"><td>'+pokedex[i].id+'</td>';
    
 	poke +='<td><img src="./gen1-4/'+pokedex[i].id+'.png" width="54" alt="'+pokedex[i].name+'"></td>'+
         '<td>'+pokedex[i].eggiv+'</td></tr>';
    
}

poke += '</tbody></table>';
  
document.getElementById('resultado').innerHTML = poke;