jquery 如何使用向上/向下移动突出显示的行？

5cg8jx4n 于 2023-06-29 发布在 jQuery

关注(0)|答案(1)|浏览(140)

我一直试图使表，可以导航到其他行使用箭头键向上/向下。但是当使用向上/向下时，它只起作用一次。之后，突出显示的行不再移动，输入无法填充。

你知道我的代码有什么问题吗？
谢谢

var table = $('#transaksiKasir tr:last');
table.addClass('bg-slate-700 text-white');

$('body').on('keydown', function(e) {
  e.preventDefault();
  
  if (e.keyCode == 40) {
    table.removeClass('bg-slate-700 text-white');
    table.next().addClass('bg-slate-700 text-white')
  } else if (e.keyCode == 38) {
    table.removeClass('bg-slate-700 text-white');
    table.prev().addClass('bg-slate-700 text-white');
  }
});

<table class="items-center w-full align-top border-gray-200 text-slate-500 mb-4" id="transaksiKasir">
  <thead class="align-bottom">
    <tr>
      <th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-lg border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">
        Nama Barang
      </th>
      <th class="px-6 py-3 pl-2 font-bold uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-lg border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">
        Harga Jual
      </th>
      <th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-lg border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">
        Quantity
      </th>
      <th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-lg border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">
        Discount (%)
      </th>
      <th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-lg border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">
        Discount (Rp.)
      </th>
      <th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-lg border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">
        Subtotal
      </th>
      <th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-lg border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">
        Total
      </th>
      <th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-lg border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">
        Action
      </th>
    </tr>
  </thead>
  <tbody>
    @foreach ($listBarang as $barang)
    <tr>
      <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
        <p class="mb-0 text-sm font-semibold leading-tight">
          {{ $barang->barang->nama_barang }}
        </p>
      </td>
      <td class="text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
        <p class="mb-0 text-lg font-semibold leading-tight">
          {{ IDR($barang->barang->harga_jual) }}
        </p>
      </td>
      <td class="align-middle p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
        <p class="mb-0 text-lg font-semibold leading-tight">
          {{ $barang->qty }}
        </p>
      </td>
      <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
        <p class="mb-0 text-lg font-semibold leading-tight">
          {{ $barang->discount_persen }}
        </p>
      </td>
      <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
        <p class="mb-0 text-lg font-semibold leading-tight">
          @isset($barang->discount_value) {{ IDR($barang->discount_value) }} @endisset
        </p>
      </td>
      <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
        <p class="mb-0 text-lg font-semibold leading-tight">
          {{ IDR($barang->subtotal) }}
        </p>
      </td>
      <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
        <p class="mb-0 text-lg font-semibold leading-tight">
          {{ IDR($barang->total) }}
        </p>
      </td>
      <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
        <button wire:click="$emit('openModal', 'kasir.edit-barang',{{ json_encode([" transaksiJualDetail " => $barang->id]) }})" class="py-2 mr-2 px-4 bg-slate-700 text-sm text-white rounded-lg hover:opacity-80 transition duration-300 ease-in-out shadow-sm">
                                <i class="fa-solid fa-edit"></i>
                            </button>
        <button wire:click="deleteBarang({{$barang->id}})" class="py-2 mr-2 px-4 bg-red-600 text-sm text-white rounded-lg hover:opacity-80 transition duration-300 ease-in-out shadow-sm">
                                <i class="fa-solid fa-trash"></i>
                            </button>
      </td>
    </tr>
    @endforeach
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jquery

来源：https://stackoverflow.com/questions/76556107/how-to-move-highlighted-row-using-up-down

1条答案

按热度按时间

zbq4xfa01#

你定义了最后一行将被高亮显示，当你将高亮显示移动到另一行时，你的最后一行不再高亮显示，根据他的说法，你没有起点再次移动高亮显示。
这是工作解决方案：

// Your initial highlighting the last row
           var table = $('#transaksiKasir tr:last');
           table.addClass('bg-slate-700 text-white');

           $('body').on('keydown', function (e){
                e.preventDefault();

                // Take this values for every arrow key press
                if(e.keyCode == 40 || e.keyCode == 38){
                   var table = $('#transaksiKasir tbody tr');
                   var table_row = $('#transaksiKasir tr.text-white');
                }
                // Down
                if(e.keyCode == 40){
                    // Stop at the last row
                    if(table_row.index() == table.length - 1) {
                        return false;
                    }
                    
                    table_row.removeClass('bg-slate-700 text-white');
                    table_row.next().addClass('bg-slate-700 text-white')
                }
                // Up
                else if(e.keyCode == 38){
                    // Stop at the first row
                    if(table_row.index() == 0) {
                        return false;
                    }
                    
                    table_row.removeClass('bg-slate-700 text-white');
                    table_row.prev().addClass('bg-slate-700 text-white');
                }
           });

.text-white {
  color: #dfdfdf;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="items-center w-full align-top border-gray-200 text-slate-500 mb-4" id="transaksiKasir">
        <thead class="align-bottom">
            <tr>
                <th
                    class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-lg border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">
                    Col 1
                </th>
                <th
                    class="px-6 py-3 pl-2 font-bold uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-lg border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">
                    Col 2
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
                    <p class="mb-0 text-sm font-semibold leading-tight">
                        Row 1
                    </p>
                </td>
                <td
                    class="text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
                    <p class="mb-0 text-lg font-semibold leading-tight">
                        Row 11
                    </p>
                </td>
            </tr>
            <tr>
                <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
                    <p class="mb-0 text-sm font-semibold leading-tight">
                        Row 2
                    </p>
                </td>
                <td
                    class="text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
                    <p class="mb-0 text-lg font-semibold leading-tight">
                        Row 22
                    </p>
                </td>
            </tr>
            <tr>
                <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
                    <p class="mb-0 text-sm font-semibold leading-tight">
                        Row 3
                    </p>
                </td>
                <td
                    class="text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
                    <p class="mb-0 text-lg font-semibold leading-tight">
                        Row 33
                    </p>
                </td>
            </tr>
            <tr>
                <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
                    <p class="mb-0 text-sm font-semibold leading-tight">
                        Row 4
                    </p>
                </td>
                <td
                    class="text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
                    <p class="mb-0 text-lg font-semibold leading-tight">
                        Row 44
                    </p>
                </td>
            </tr>
            <tr>
                <td class="p-2 bg-transparent border-b whitespace-nowrap shadow-transparent">
                    <p class="mb-0 text-sm font-semibold leading-tight">
                        Row 5
                    </p>
                </td>
                <td
                    class="text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
                    <p class="mb-0 text-lg font-semibold leading-tight">
                        Row 55
                    </p>
                </td>
            </tr>
        </tbody>
    </table>

赞(0）回复(0）举报 2023-06-29

我来回答

jquery 如何使用向上/向下移动突出显示的行？

1条答案

相关问题

热门标签

最新问答