JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<!-- tablerow switch-->
<table id="table1">
    <thead>
        <tr><th colspan="2">winkelwagen</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input class="nr" value="1" style="width:20px; text-align:center;" type="text" />
<a href="#" class="up">+</a>
<a href="#" class="down">-</a>  
            </td>
            <td>
                some random data
            </td>
             <td>
                <button type="button" class="delbutton">remove</button>
            </td>
        </tr>
        <tr>
            <td>
                <input class="nr" value="1" style="width:20px; text-align:center;" type="text" />
<a href="#" class="up">+</a>
<a href="#" class="down">-</a>  
            </td>
            <td>
                some random data
            </td>
             <td>
                <button class="delbutton">remove</button>
            </td>
        </tr>
        <tr>
            <td>
                <input class="nr" value="1" style="width:20px; text-align:center;" type="text" />
<a href="#" class="up">+</a>
<a href="#" class="down">-</a>  
            </td>
            <td>
                some random data
            </td>
             <td>
                <button class="delbutton">remove</button>
            </td>
        </tr>
        <tr>
            <td>
                <input class="nr" value="1" style="width:20px; text-align:center;" type="text" />
<a href="#" class="up">+</a>
<a href="#" class="down">-</a>  
            </td>
            <td>
                some random data
            </td>
             <td>
                <button class="delbutton">remove</button>
            </td>
        </tr>
    </tbody>
</table> 
<br/>

CSS

.tr{border:1px solid ; width:100%; height:22px; background:#ccc; color:#000;}
td{width:300px; border-top:1px solid gold;}
td {font-weight:600;}
#table1{border:1px solid red; height:100px; width:100%; }
#table2{border:1px solid green; height:100px; width:100%; }
table {width:100%;}

.selectedRow{background:#DCECEF;}


a{border:1px solid black; padding:3px 10px; text-decoration:none; font-weight:600;}

JavaScript

$(".delbutton").live('click',function(){
        if(confirm("Weet je zeker dat je deze record wilt verwijderen?")){  
            $(this).parents("tr").animate({ opacity: "hide" }, "slow");   
        }
        return false;
    });
        
    var nr = $('.nr');
    
    $('.down').click(function(){
        var $this = $(this);
        var nr = $this.prev().prev('.nr');
            var currentNr = nr.val();
            if (currentNr <= 1 ){
                nr.val(1);
            } else {
                nr.val(currentNr - 1);
            }  
    });
    
    
    $('.up').click(function(){
        var $this = $(this);
        var nr = $this.prev('.nr');
       var currentNr = nr.val();
       var newValue = parseInt(currentNr) + 1;
       nr.val(newValue);
    });
    
    nr.keypress(function(e){
        var $this = $(this);
        var nr = $this;
        if (e.keyCode == 38 || e.keyCode == 39) {
            var currentNr = nr.val();
            var newValue = parseInt(currentNr) + 1;
            nr.val(newValue);
            return false;
        }
        if (e.keyCode == 40 || e.keyCode == 37) {
        var $this = $(this);
        var nr = $this;
            var currentNr = nr.val();
            if (currentNr <= 1 ){
                nr.val(1);
            } else {
                nr.val(currentNr - 1);
            }
            return false;
        }
    });



    var intervalClassPlus;
    $(".up").mousedown(function() {
//        var $this = $(this);
//        var nr = $this.prev('.nr');
      intervalClassPlus = setInterval(runPlusOne, 200);
    }).mouseup('mouseleave',function() {
      clearInterval(intervalClassPlus);
    });

    var intervalClassMin;
    $(".down").mousedown(function() {
//        var $this = $(this);
//        var nr = $this.prev().prev('.nr');
      intervalClassMin = setInterval(runMinOne, 200);
    }).mouseup('mouseleave',function() {
      clearInterval(intervalClassMin);
    });
    
    function runPlusOne() {
        var...