JSFiddle - React, Tailwind, and code Playground

by Adam Trojnar

HTML

<table>
 <tr>
  <td>
   <table class="tabela">
    <thead>
     <tr>
      <th>Nazwisko i imię</th>
      <th>Nr indeksu</th>

      <th>Python</th>
      <th>jQuery</th>
      <th>Flex</th>
      <th>Suma</th>
     </tr>
    </thead>
    <tbody>
       <tr>
             <td>Brzenczyszczykiewicz Antoniusz</td>
             <td>1234567</td>
             <td class="punkty">13</td>
             <td class="punkty">23</td>
             <td class="punkty">0</td>
             <td class="suma">-</td>
       </tr>
       <tr>
             <td>Szczebrzyszewski Gustaw</td>
             <td>000911</td>
             <td class="punkty">100</td>
             <td class="punkty">30</td>
             <td class="punkty">50</td>
             <td class="suma">-</td>
       </tr>
    </tbody>
   </table>
  </td>
  <td>
   <button>Dodaj osobę</button>
  </td>
 </tr>
</table>

JavaScript

$(function(){ 

  $('td.punkty').on("click",function() {

    var text = $(this).text();
    var input = $('<input id="attribute" value="' + text + '" />')
    $(this).text('').append(input);
    input.select();

    input.blur(function() {
        var text = $('#attribute').val();
        $('#attribute').parent().text(text);
        $('#attribute').remove();
    });
});

	// $( "tbody > td" ).on( "mouseenter", function() {
	// 	$( this ).css({
	// 	"background-color": "yellow",
	// 	"font-weight": "bolder"
	// 	});
	// 	});

$("thead").css("background-color", "#737373").css("color", "#c8e196");
$("td").css("text-align", "center");
$('.punkty').css('width', '200px');


$( "td" )
	.on( "mouseenter", function() {
	$( this ).css({
	"background-color": "white"
	});

    $("td.suma").each(function(){ 
  var suma = 0;
  // alert('suma liczy sieo!');
  $(this).prevAll().filter(".punkty").each(function(){ 
    suma = parseInt(suma) + parseInt($(this).text());
  });
    $(this).text(suma);
  });


})
.on( "mouseleave", function() {
	var styles = {
	backgroundColor : "",
	fontWeight: ""
	};
	$( this ).css( styles );

});

$('button').on("click",function(){
  $('.tabela > tbody:last').append('<tr><td></td><td></td><td class="punkty">0</td><td class="punkty">0</td><td>0</td> </tr>');
});


	
	$("tbody > tr:odd").css( "background-color", "#339933" );
	$("tbody > tr:even").css( "background-color", "#F0F0F0  " );





 });