时间戳

首页 > 解决方案 > PHP：通过 JQuery 选择表格行

php - PHP：通过 JQuery 选择表格行

问题描述

我一直在尝试通过更改所选行的颜色来测试我的 JQuery 是否有效。我的目标是从数据库中获取数据，使用 for 循环将数据固定到表中，然后使用我的代码单独选择每个；每当我按下他们没有突出显示的行时，这意味着脚本不起作用，我的代码如下所示：

    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <style>
    #HighLight {
      border-collapse: collapse;
      text-align: center;
      width: 100%;
    }
    #HighLight tr:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }
    tr {
      cursor: pointer
    }
    th {
      background-color: #000;
      color: #fff;
      border: 1px solid #fff !important;
      cursor: default;
    }
    td,
    th {
      padding: 5px;
      border: 1px solid black;
      white-space: nowrap;
      vertical-align: text-top;
      overflow-x: auto;
      max-width: 250px;
      max-height: 25px;
    }
    .selected {
      background-color: rgba(0, 0, 0, 0.4) !important;
      color: #fff !important;
    }
    </style>

    </head>

    <body>

    <script>
    $("#HighLight tr").click(function() {
      $(this).addClass('selected').siblings().removeClass('selected');
    });
    </script>

    <table class="Tab" id="HighLight">
    <tr>
        <th class="cell">ID</th>
        <th class="cell">Number</th>
        <th class="cell">Data1</th>
        <th class="cell">Data2</th>
        <th class="cell">Data3</th>
        <th class="cell">Data4</th>
        <th class="cell">Data5</th>
        <th class="cell">Data6</th>

    <tbody>
    @foreach ($all_users as $a)
    <tr>
    <td>{{ $a->ID }}</td>
    <td>{{ $a->Number }}</td>
    <td>{{ $a->DBData1 }}</td>
    <td>{{ $a->DBData2 }}</td>
    <td>{{ $a->DBData3 }}</td>
    <td>{{ $a->DBData4 }}</td>
    <td>{{ $a->DBData5 }}</td>
    <td>{{ $a->DBData6 }}</td>
    </tr>
    @endforeach
    </tbody>

    </table>

    </body>
    </html>

标签： phphtmljqueryajax

解决方案

试试这个：这里的工作代码：https ://jsfiddle.net/usmanmunir/32jswq0g/38/

$("#highLight tr th").click(function() {
  $("#highLight tr th").removeClass('selected')
    if ($(this).hasClass('selected')) {
     $(this).removeClass('selected')
   } else {
     $(this).addClass('selected')
  }
});
#HighLight {
      border-collapse: collapse;
      text-align: center;
      width: 100%;
    }
    #HighLight tr:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }
    tr {
      cursor: pointer
    }
    th {
      background-color: #000;
      color: #fff;
      border: 1px solid #fff !important;
      cursor: default;
    }
    td,
    th {
      padding: 5px;
      border: 1px solid black;
      white-space: nowrap;
      vertical-align: text-top;
      overflow-x: auto;
      max-width: 250px;
      max-height: 25px;
    }
    .selected {
      background-color: rgba(0, 0, 0, 0.4) !important;
      color: #fff !important;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tab" id="highLight">
    <tr>
        <th class="cell">ID</th>
        <th class="cell">Number</th>
        <th class="cell">Data1</th>
        <th class="cell">Data2</th>
        <th class="cell">Data3</th>
        <th class="cell">Data4</th>
        <th class="cell">Data5</th>
        <th class="cell">Data6</th>
    </tr>
</table>

推荐阅读