2023年6月26日 19:06:45go评论56阅读模式

英文:

How to Move Highlighted Row using Up/Down?

问题

I've translated the provided content into Chinese:

"我一直在尝试创建一个可以使用上/下箭头键导航到其他行的表格。但是当使用上/下箭头键时，它只能工作一次。之后，高亮显示的行不再移动，输入也无法填充。

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

谢谢。

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">
  <!-- 表格的内容... -->
</table>

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

以上是您提供的代码和问题的翻译。"

英文:

I've been trying to make table that can navigate to other rows using arrow key up/down. But when using up/down it only works once. After that the highlighted row is not moving and the input cannot be filled.

Do you know what's wrong with my code?

Thanks.

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

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

&lt;table class=&quot;items-center w-full align-top border-gray-200 text-slate-500 mb-4&quot; id=&quot;transaksiKasir&quot;&gt;
  &lt;thead class=&quot;align-bottom&quot;&gt;
    &lt;tr&gt;
      &lt;th class=&quot;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&quot;&gt;
        Nama Barang
      &lt;/th&gt;
      &lt;th class=&quot;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&quot;&gt;
        Harga Jual
      &lt;/th&gt;
      &lt;th class=&quot;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&quot;&gt;
        Quantity
      &lt;/th&gt;
      &lt;th class=&quot;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&quot;&gt;
        Discount (%)
      &lt;/th&gt;
      &lt;th class=&quot;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&quot;&gt;
        Discount (Rp.)
      &lt;/th&gt;
      &lt;th class=&quot;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&quot;&gt;
        Subtotal
      &lt;/th&gt;
      &lt;th class=&quot;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&quot;&gt;
        Total
      &lt;/th&gt;
      &lt;th class=&quot;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&quot;&gt;
        Action
      &lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    @foreach ($listBarang as $barang)
    &lt;tr&gt;
      &lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
        &lt;p class=&quot;mb-0 text-sm font-semibold leading-tight&quot;&gt;
          {{ $barang-&gt;barang-&gt;nama_barang }}
        &lt;/p&gt;
      &lt;/td&gt;
      &lt;td class=&quot;text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
        &lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
          {{ IDR($barang-&gt;barang-&gt;harga_jual) }}
        &lt;/p&gt;
      &lt;/td&gt;
      &lt;td class=&quot;align-middle p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
        &lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
          {{ $barang-&gt;qty }}
        &lt;/p&gt;
      &lt;/td&gt;
      &lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
        &lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
          {{ $barang-&gt;discount_persen }}
        &lt;/p&gt;
      &lt;/td&gt;
      &lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
        &lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
          @isset($barang-&gt;discount_value) {{ IDR($barang-&gt;discount_value) }} @endisset
        &lt;/p&gt;
      &lt;/td&gt;
      &lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
        &lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
          {{ IDR($barang-&gt;subtotal) }}
        &lt;/p&gt;
      &lt;/td&gt;
      &lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
        &lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
          {{ IDR($barang-&gt;total) }}
        &lt;/p&gt;
      &lt;/td&gt;
      &lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
        &lt;button wire:click=&quot;$emit(&#39;openModal&#39;, &#39;kasir.edit-barang&#39;,{{ json_encode([&quot; transaksiJualDetail &quot; =&gt; $barang-&gt;id]) }})&quot; class=&quot;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&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-edit&quot;&gt;&lt;/i&gt;
                            &lt;/button&gt;
        &lt;button wire:click=&quot;deleteBarang({{$barang-&gt;id}})&quot; class=&quot;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&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-trash&quot;&gt;&lt;/i&gt;
                            &lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    @endforeach
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

答案1

得分: 1

你定义了最后一行将被突出显示，并且当你将突出显示移到另一行时，你的最后一行不再突出显示，根据他的说法，你没有移动突出显示的起点。

这是有效的解决方案：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
// 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');
     }
});

<!-- language: lang-css -->
.text-white {
  color: #dfdfdf;
}

<!-- language: lang-html -->
<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>

<!-- end snippet -->

英文:

You defined that last row will be highlighted row, and when you move highlight to another row your last row is no more highlighted, and according to him you don't have starting point to move highlight again.

This is working solution:

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

.text-white {
color: #dfdfdf;
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;table class=&quot;items-center w-full align-top border-gray-200 text-slate-500 mb-4&quot; id=&quot;transaksiKasir&quot;&gt;
&lt;thead class=&quot;align-bottom&quot;&gt;
&lt;tr&gt;
&lt;th
class=&quot;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&quot;&gt;
Col 1
&lt;/th&gt;
&lt;th
class=&quot;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&quot;&gt;
Col 2
&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
&lt;p class=&quot;mb-0 text-sm font-semibold leading-tight&quot;&gt;
Row 1
&lt;/p&gt;
&lt;/td&gt;
&lt;td
class=&quot;text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
&lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
Row 11
&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
&lt;p class=&quot;mb-0 text-sm font-semibold leading-tight&quot;&gt;
Row 2
&lt;/p&gt;
&lt;/td&gt;
&lt;td
class=&quot;text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
&lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
Row 22
&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
&lt;p class=&quot;mb-0 text-sm font-semibold leading-tight&quot;&gt;
Row 3
&lt;/p&gt;
&lt;/td&gt;
&lt;td
class=&quot;text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
&lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
Row 33
&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
&lt;p class=&quot;mb-0 text-sm font-semibold leading-tight&quot;&gt;
Row 4
&lt;/p&gt;
&lt;/td&gt;
&lt;td
class=&quot;text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
&lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
Row 44
&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;p-2 bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
&lt;p class=&quot;mb-0 text-sm font-semibold leading-tight&quot;&gt;
Row 5
&lt;/p&gt;
&lt;/td&gt;
&lt;td
class=&quot;text-center p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent&quot;&gt;
&lt;p class=&quot;mb-0 text-lg font-semibold leading-tight&quot;&gt;
Row 55
&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何使用上/下键移动高亮行？

问题

答案1

使用 `with()` 函数时，参数是数组还是字符串是否有区别？

如何创建一个jQuery函数，使点击的按钮会滚动到下一个日期。

Render component when changes value in ReactJS.

Razor Page – 表单未提交

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论