按回车键获取表格内突出显示行的数据 [英] Fetch data of highlighted row inside a table on hitting enter key

查看：24
本文介绍了按回车键获取表格内突出显示行的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个表格，在搜索框中输入一些输入时会附加该表格.我正在使用箭头键浏览行.我希望当我按下回车键时，我会在所选/突出显示的行中获取数据.

例如，在下面的代码中，我想获取 td 内部的名称，即 John、Jacob 等.

 $(function() {常量向上 = 38;常量向下 = 40;常量箭头 = [向上，向下];const HIGHLIGHT = 'highlight_row';$('#searchbar').on('input keydown', function(e) {让 $table = $('.child-div');如果 ($(this).val().length >= 3) {$table.show();} 别的 {$table.hide();}让键 = e.which;如果(箭头.包含(键)){让 selectedRow = -1;让 $rows = $table.find('tr');$rows.each(function(i, row) {如果 ($(row).hasClass(HIGHLIGHT)) {selectedRow = i;}});if (key == UP && selectedRow > 0) {$rows.removeClass(HIGHLIGHT);$rows.eq(selectedRow - 1).addClass(HIGHLIGHT);} else if (key == DOWN && selectedRow < $rows.length - 1) {$rows.removeClass(HIGHLIGHT);$rows.eq(selectedRow + 1).addClass(HIGHLIGHT);}}});});

 .highlight_row {背景颜色:红色；}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="容器"><input type="text" class="form-control form-rounded rounded-pill" placeholder="Text input" id="searchbar"><table class="table child-div" style="display: none;"><头><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">句柄</th></tr></thead><tr><th scope="row">1</th><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><th scope="row">3</th><td>拉里</td><td>鸟</td><td>@twitter</td></tr></tbody>

如何实现这个场景?

谢谢！！

解决方案

使用您已经使用的代码，您可以添加

if (key == 13 && selectedRow > 0)name = $rows.eq(selectedRow).find(">td").eq(0).text()

通过使用 .find(">td")，您只能找到 td 单元格，而您的第一列是 th> 所以它跳过了 - 意味着 0 是第一个 td

由于编写原始代码以获取 selectedRow 的方式，我已将 13 包含在 arrows 数组中，因此如果(这是有点令人困惑，因为它不是箭头，但不想改变它如何获得 selectedRow 太多，因为这是您在之前的问题中选择的解决方案)

您可以改为将回车键检查放在箭头键数组之外并使用

$table.find('tbody tr.highlight_row > td').eq(0).text())

(见第二个片段)

$(function() {常量向上 = 38;常量向下 = 40;常量箭头 = [向上，向下，13]；const HIGHLIGHT = 'highlight_row';$('#searchbar').on('input keydown', function(e) {让 $table = $('.child-div');$table.toggle($(this).val().length >= 1);让键 = e.which;如果(箭头.包含(键)){让 selectedRow = -1;让 $rows = $table.find('tbody tr');$rows.each(function(i, row) {如果 ($(row).hasClass(HIGHLIGHT)) {selectedRow = i;}});if (key == UP && selectedRow > 0) {$rows.removeClass(HIGHLIGHT);$rows.eq(selectedRow - 1).addClass(HIGHLIGHT);} else if (key == DOWN && selectedRow < $rows.length - 1) {$rows.removeClass(HIGHLIGHT);$rows.eq(selectedRow + 1).addClass(HIGHLIGHT);} else if (key == 13 && selectedRow > 0) {警报($rows.eq(selectedRow).find(">td").eq(0).text())}}});});

.highlight_row {背景颜色:红色；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="容器"><input type="text" class="form-control form-rounded rounded-pill" placeholder="Text input" id="searchbar"><table class="table child-div" style="display: none;"><头><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">句柄</th></tr></thead><tr><th scope="row">1</th><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><th scope="row">3</th><td>拉里</td><td>鸟</td><td>@twitter</td></tr></tbody>

$(function() {常量向上 = 38;常量向下 = 40;常量箭头 = [向上，向下];const HIGHLIGHT = 'highlight_row';$('#searchbar').on('input keydown', function(e) {让 $table = $('.child-div');$table.toggle($(this).val().length >= 1);让键 = e.which;如果(箭头.包含(键)){让 selectedRow = -1;让 $rows = $table.find('tbody tr');$rows.each(function(i, row) {如果 ($(row).hasClass(HIGHLIGHT)) {selectedRow = i;}});if (key == UP && selectedRow > 0) {$rows.removeClass(HIGHLIGHT);$rows.eq(selectedRow - 1).addClass(HIGHLIGHT);} else if (key == DOWN && selectedRow < $rows.length - 1) {$rows.removeClass(HIGHLIGHT);$rows.eq(selectedRow + 1).addClass(HIGHLIGHT);}}如果(键== 13){var row = $table.find('tbody tr.highlight_row')警报(row.find(> td").eq(0).文本())}});});

.highlight_row {背景颜色:红色；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="容器"><input type="text" class="form-control form-rounded rounded-pill" placeholder="Text input" id="searchbar"><table class="table child-div" style="display: none;"><头><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">句柄</th></tr></thead><tr><th scope="row">1</th><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><th scope="row">3</th><td>拉里</td><td>鸟</td><td>@twitter</td></tr></tbody>

I have a table that gets appended on entering some input inside a search box. I am navigating through the rows by using arrow keys. I want that when I hit the enter key , I get the data inside that selected/highlighted row.

For example, in the below code I want to I want to get the name of inside the td i.e. John, Jacob etc.

            $(function() {
          const UP = 38;
          const DOWN = 40;
          const ARROWS = [UP, DOWN];
          const HIGHLIGHT = 'highlight_row';
          $('#searchbar').on('input keydown', function(e) {
            let $table = $('.child-div');
            if ($(this).val().length >= 3) {
              $table.show();
            } else {
              $table.hide();
            }
            let key = e.which;
            if (ARROWS.includes(key)) {
              let selectedRow = -1;
              let $rows = $table.find('tr');
              $rows.each(function(i, row) {
                if ($(row).hasClass(HIGHLIGHT)) {
                  selectedRow = i;
                }
              });
              if (key == UP && selectedRow > 0) {
                $rows.removeClass(HIGHLIGHT);
                $rows.eq(selectedRow - 1).addClass(HIGHLIGHT);
                
              } else if (key == DOWN && selectedRow < $rows.length - 1) {
                $rows.removeClass(HIGHLIGHT);
                $rows.eq(selectedRow + 1).addClass(HIGHLIGHT);
              }
            }
          });
        });

            .highlight_row {
              background-color: red;
            }

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <div class="container">
              <input type="text" class="form-control form-rounded rounded-pill" placeholder="Text input" id="searchbar">
              <table class="table child-div" style="display: none;">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>

How to achieve this scenario ?

Thanks !!

解决方案

Using the code you're already working with, you can add

if (key == 13 && selectedRow > 0)
    name = $rows.eq(selectedRow).find(">td").eq(0).text()

By using .find(">td") you're finding only the td cells and your first column is a th so it skips that - meaning 0 is the first td

Because of the way the original code is written to get the selectedRow, I've included 13 in the arrows array so it goes in the same if (this is slightly confusing as it's not an arrow, but didn't want to change how it gets selectedRow too much as this is the solution you chose in your earlier question)

You could instead put the enter key check outside the arrow key array and use

$table.find('tbody tr.highlight_row > td').eq(0).text())

(see second snippet)

$(function() {
  const UP = 38;
  const DOWN = 40;
  const ARROWS = [UP, DOWN, 13];
  const HIGHLIGHT = 'highlight_row';
  $('#searchbar').on('input keydown', function(e) {
    let $table = $('.child-div');
    $table.toggle($(this).val().length >= 1);

    let key = e.which;
    if (ARROWS.includes(key)) {
      let selectedRow = -1;
      let $rows = $table.find('tbody tr');
      $rows.each(function(i, row) {
        if ($(row).hasClass(HIGHLIGHT)) {
          selectedRow = i;
        }
      });
      if (key == UP && selectedRow > 0) {
        $rows.removeClass(HIGHLIGHT);
        $rows.eq(selectedRow - 1).addClass(HIGHLIGHT);

      } else if (key == DOWN && selectedRow < $rows.length - 1) {
        $rows.removeClass(HIGHLIGHT);
        $rows.eq(selectedRow + 1).addClass(HIGHLIGHT);
        
      } else if (key == 13 && selectedRow > 0) {
        alert($rows.eq(selectedRow).find(">td").eq(0).text())
        
      }
    }
    
    
  });
});

.highlight_row {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input type="text" class="form-control form-rounded rounded-pill" placeholder="Text input" id="searchbar">
  <table class="table child-div" style="display: none;">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

$(function() {
  const UP = 38;
  const DOWN = 40;
  const ARROWS = [UP, DOWN];
  const HIGHLIGHT = 'highlight_row';
  $('#searchbar').on('input keydown', function(e) {
    let $table = $('.child-div');
    $table.toggle($(this).val().length >= 1);

    let key = e.which;
    if (ARROWS.includes(key)) {
      let selectedRow = -1;
      let $rows = $table.find('tbody tr');
      $rows.each(function(i, row) {
        if ($(row).hasClass(HIGHLIGHT)) {
          selectedRow = i;
        }
      });
      if (key == UP && selectedRow > 0) {
        $rows.removeClass(HIGHLIGHT);
        $rows.eq(selectedRow - 1).addClass(HIGHLIGHT);

      } else if (key == DOWN && selectedRow < $rows.length - 1) {
        $rows.removeClass(HIGHLIGHT);
        $rows.eq(selectedRow + 1).addClass(HIGHLIGHT);
        
      } 
    }
    
    if (key == 13) {
        var row = $table.find('tbody tr.highlight_row')
        alert(row.find(">td").eq(0).text())
    }
    
  });
});

.highlight_row {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input type="text" class="form-control form-rounded rounded-pill" placeholder="Text input" id="searchbar">
  <table class="table child-div" style="display: none;">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

这篇关于按回车键获取表格内突出显示行的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆