当我在 laravel 8 项目上单击它时，将 class 添加到 table 行

Question

我正在使用 laravel 8 和 Livewire 开发 Web 应用程序。

在我的应用程序的视图中，我有 tables，其中我显示了从数据库中获取的部分数据，并单击了您想要了解其详细信息的特定行，然后我恢复了我的所有信息需要。

确保用户在单击他们正在阅读详细信息的 table 行时获得视觉反馈。

为了获得此结果，我在 table 的行中插入了一个 onclick="toggleClass(this, 'table-info')" 方法，该方法调用脚本来实现此目的，该方法将 class 添加到单击的行table-info

我遇到的问题如下，当我单击 table 行时，class 被添加到该行几秒钟，然后它丢失了，因此我失去该行的突出显示。

您有什么建议或想法吗？感谢大家！

这是我的代码：

table-pratiche-content.blade.php（带电组件）

<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

在Livewire组件中声明一个public属性（PHPClass）

public $markedRows = [];

创建函数

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

当您在 blade 中进行迭代时，请检查迭代中的当前 ID 是否为 $markedRows 的 in_array，然后执行您需要执行的任何操作。

当我在 laravel 8 项目上单击它时，将 class 添加到 table 行

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

php

laravel

laravel-blade

laravel-livewire