JSFiddle - React, Tailwind, and code Playground

by Andrey Moroz

HTML

<table class="table table-striped table-bordered dataTable no-footer">
    <tr>
        <th>Действие 1</th>      
        <th>Действие 2</th>
    </tr>
    <tr>
        <td><a for="act_1" onclick="return confirm(\'Вы уверены?\')" href="index.php?act=sent&id=1&act=1">act_1</a></td>
        <td>Х</td>
    </tr>
    <tr>
        <td><a for="act_1" onclick="return confirm(\'Вы уверены?\')" href="index.php?act=sent&id=40&act=1">act_1</a></td>
        <td>Х</td>
    </tr>
    <tr class="success">
        <td>Х</td>
        <td><a for="act_2" onclick="return confirm(\'Вы уверены?\')" href="index.php?act=sent&id=42&act=2">act 2</a></td>
    </tr>
        <tr class="danger" >
        <td>Х</td>
        <td>Х</td>
    </tr>
   
</table>

JavaScript

$(document).ready(function(){
        $('a').click(function(e){
            e.preventDefault();
            var a = $(this).attr('for');
            if(a == 'act_1'){
                $(this).parent().parent().addClass('success');
                $(this).parent().html('X');
                $(this).parent().next('td').css( "background-color", "red" );
                //alert($(this).parent().next().html());
            }
            else{
                $(this).parent().parent().removeClass('success');
                $(this).parent().parent().addClass('danger');
                $(this).parent().html('X');
            }
        })
    })