Mam tabelę, która zostanie dołączona do wprowadzania wkładu w polu wyszukiwania. Nawilżam przez rzędy za pomocą klawiszy strzałek. Chcę tego, gdy trafię na klucz Enter, otrzymuję dane w tym wybranym / podświetlonym wierszu.

Na przykład, w poniższym kodem chcę, chcę uzyskać nazwę wewnątrz TD i. John, Jacob itp.

            $(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>

Jak osiągnąć ten scenariusz?

Dzięki !!

1
Ityka Bandta 23 październik 2020, 12:24

1 odpowiedź

Najlepsza odpowiedź

Korzystanie z kodu, z którym już pracujesz, możesz dodać

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

Używając {{x0}

Ze względu na sposób, w jaki oryginalny kod jest napisany, aby uzyskać selektor, zawarłem 13 w tablicy arrows, więc idzie tak samo, jeśli (jest to lekko mylące, ponieważ nie jest strzałką, ale Nie chciałem zmieniać tego, jak to robi się zbyt wiele, ponieważ jest to rozwiązanie, które wybrałeś w swoim wcześniejszym pytaniu)

Możesz zamiast tego umieścić klucz do klucza Enter na zewnątrz arrow Tablica i użyj

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

(patrz drugi fragment)

$(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>
2
freedomn-m 23 październik 2020, 09:48