Adding class on a table row when i click it on laravel 8 project

Question

I am developing a web application using laravel 8 and Livewire.

In the views of my application I have tables in which I show partial data taken from the DB and clicked on the specific row of which you want to have the details then I recover all the information I need.

To ensure that the user has visual feedback when they click on a table row of which they are reading the detail.

To obtain this result I have inserted on the rows of the table an onclick="toggleClass(this, 'table-info')" method that calls a script to achieve this purpose, which adds to the clicked row the class table-info

The problem I get though is the following, when I click on the table row, the class is added to the row for a few seconds and then it is lost, and consequently I lose the highlight of the row.

Do you have any suggestions or ideas? Thanks to all!

Here my code:

• table-pratiche-content.blade.php ( livewire component )

<tbody>
    @if (!empty($pratiche))
        <?php
        $carico = 0;
        $riscosso = 0;
        $sgravio = 0;
        $residuo = 0;

        $first = null;
        $last =null;
        $current = null;
        $next = null;
        $prev = null;
        ?>
        @foreach ($pratiche['data'] as $p)
            <tr wire:click="clickPartiteTrigger({{ $p['id_minuta'] }})" onclick="toggleClass(this, 'table-info')">
                <td>@if(isset($p['denominazioneSoggetto'])) {{ $p['denominazioneSoggetto'] }} @else - @endif</td>
                <td>@if(isset($p['codiceFiscale'])) {{ $p['codiceFiscale'] }} @else - @endif</td>
                <td>@if(isset($p['indirizzoPOSTA'])) {{ $p['indirizzoPOSTA'] }} @else - @endif</td>
                <td>@if(isset($p['descrizione_sintetica']) && $p['descrizione_sintetica'] != '' ) {{ $p['descrizione_sintetica'] }} @else - @endif</td>
                <td>@if(isset($p['carico'])) {{ $p['carico'] }} &euro; @else - @endif</td>
                <td>@if(isset($p['riscosso'])) {{ $p['riscosso'] }} &euro; @else - @endif</td>
                <td>@if(isset($p['sgravio'])) {{ $p['sgravio'] }} &euro; @else - @endif</td>
                <td>@if(isset($p['residuo'])) {{ $p['residuo'] }} &euro; @else - @endif</td>
                <td>@if(isset($p['collaboratore'])) {{ $p['collaboratore'] }} @else - @endif</td>
                <td>@if(isset($p['data_assegnazione'])) {{ $p['data_assegnazione'] }} @else - @endif</td>
                @if($p['residuo']>0)
                    <td><span class="badge light badge-warning">Non riscosso</span></td>
                @else
                    <td><span class="badge light badge-success">Riscosso</span></td>
                @endif
                <?php
                    $carico = $carico + $p['carico'];
                    $riscosso = $riscosso + $p['riscosso'];
                    $sgravio = $sgravio + $p['sgravio'];
                    $residuo = $residuo + $p['residuo'];
                ?>
            </tr>
        @endforeach
            <?php
                    $first = $pratiche['first_page_url'];
                    $last = $pratiche['last_page_url'];
                    $current = $pratiche['current_page'];
                    $next = $pratiche['next_page_url'];
                    $prev = $pratiche['prev_page_url'];
            ?>
    @endif
</tbody>
<livewire:tbl-pratiche-footer-filter :carico="$carico" :riscosso="$riscosso" :sgravio="$sgravio" :residuo="$residuo" 
                :first="$first" :last="$last" :current="$current" :next="$next" :prev="$prev" :pratiche="$pratiche" />

 @push('custom_scripts')
 <script type="text/javascript">
        function toggleClass(el, className) {
            if (el.className.indexOf(className) >= 0) {
                el.className = el.className.replace(className,"");
        }
        else {
                el.className  += className;
            }
        }
</script>
 @endpush

• table-pratiche.blade.php

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Pratiche</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover table-responsive-md" id="tblpratiche">
                    <thead>
                      <tr>
                        <th>Soggetto</th>
                        <th>Codice Fiscale</th>
                        <th>Indirizzo</th>
                        <th>Tipo di imposta</th>
                        <th>Carico</th>
                        <th>Riscosso</th>
                        <th>Sgravio</th>
                        <th>Residuo</th>
                        <th>Assegnatario</th>
                        <th>Data assegn.</th>
                        <th>Dettagli</th>
                      </tr>
                    </thead>
                    <livewire:table-pratiche-content />

Answer 1

Declare a public property in the Livewire Component (The PHP Class)

public $markedRows = [];

create a function

public function markRow($id) {
    $this->markedRows[] = $id;
}

when you iterate in your blade, check that the current id in the iteration is in_array of $markedRows and do whatever you need to do.