HTML e JAVASCRIPT сканирование таблицы - PullRequest
Новая
       0

HTML e JAVASCRIPT сканирование таблицы

0 голосов
/ 25 мая 2018

У меня очень большая таблица на странице HTML, и я создаю текстовый ввод для отображения только соответствующей строки таблицы.Это мой код: 

<input type="text" id="myInput" oninput="myFunction()">
<table id="tabella">
<tr><th>TIPO</th><th>SCHEMA</th><th>NOME</th><th>DDL</th></tr>
<tr><td>[...]</td></tr>
[...] > 10000 rows
</table>

<script>
function myFunction() {
    var x = document.getElementById("myInput").value;
    document.getElementById("demo").innerHTML = "You wrote: " + x;

    var table = document.getElementById('tabella');

    for (var i = 0, row; row = table.rows[i]; i++) 
    {   
        for (var j = 0, col; col = row.cells[j]; j++) 
        {
            $(row).hide();
        }
    }

    for (var i = 0, row; row = table.rows[i]; i++) 
    {

        if ( row.cells[2].innerHTML.includes(x)  )
        {
            $(row).show();
        }   
    }   
}
</script>

Проблема в следующем:
Когда я набираю один символ в поле ввода, он очень долго ждет. Существует ли режим перезаписи, который быстрее?

Ответы [ 2 ]

0 голосов
/ 25 мая 2018

Есть несколько вещей, которые вы можете сделать, чтобы улучшить производительность ...

  • Не используйте .innerHTML, когда текст, с которым вы работаете, не содержит HTML, потому что браузер задействуетHTML-парсер каждый раз, когда вы используете это.Для получения / настройки текста, который не содержит HTML, используйте .textContent.В JQuery аналогичными методами являются .html() и .text().
  • Не сканируйте DOM на наличие элементов, которые вы уже сканировали ранее.Это означает, что кешированные переменные ссылаются на ваши DOM-объекты вне ваших многократно вызываемых функций.
  • Вместо того, чтобы циклически обрабатывать каждую строку и ячейку вручную, и, поскольку вы используете JQuery, просто поместите все строки в упакованный набор JQuery.и работать с этой коллекцией.Используйте метод JQuery .find() с селектором JQuery :contains . 

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style>
    #demo { margin-top:1em; padding:3px; width:20%; font-weight:bold;
            border:1px solid #aa0; background:#ee3; height:1em; 
    }
  </style>
</head>
<body>
<input type="text" id="myInput">
<table id="tabella">
<thead>
  <tr>
    <th>TIPO</th>
    <th>SCHEMA</th>
    <th>NOME</th>
    <th>DDL</th>
  </tr>
</thead>
<tr>
  <td>row 1, cell 1</td>
  <td>row 1, cell 21</td>
  <td>row 1, cell 3</td>
  <td>row 1, cell 4</td> 
</tr>
<tr>
  <td>row 2, cell 1</td>
  <td>row 2, cell 21</td>
  <td>row 2, cell 3</td>
  <td>row 2, cell 4</td> 
</tr>
<tr>
  <td>row 3, cell 1</td>
  <td>row 3, cell 21</td>
  <td>row 3, cell 3</td>
  <td>row 3, cell 4</td> 
</tr>
<tr>
  <td>row 4, cell 1</td>
  <td>row 4, cell 21</td>
  <td>row 4, cell 3</td>
  <td>row 4, cell 4</td> 
</tr>
</table>

<div id="demo"></div>

<script>
  // Get your DOM references outside of the callback function
  // so that you aren't scanning the DOM over and over for the
  // same elements.
  let $tbl = $("#tabella");
  let $dem = $("#demo");

  // Don't use inline HTML event handlers (i.e. oninput). 
  // Do all of yor JavaScript outside of the HTML
  $("#myInput").on("input", myFunction);

  function myFunction() {
    // Hide all the rows in the table, except the header row
    // (<tbody> is implicitly created)
    $("tbody > tr",$tbl).hide();
   
    // Then, find the row(s) that contain the entered text and show only them.
    let $found = $tbl.find("tbody > tr:contains('" + this.value + "')").show();
    
    // Don't use .innerHTML for non-HTML strings, use .textContent instead.
    // In JQuery, that's .text() instead of .html()
    $dem.text($found.length + " records found.");    
  }
</script>
</body>
</html>
0 голосов
/ 25 мая 2018

Спасибо, ребята, я нашел решение: 

<script>
var $rows = $('#tabella tr');
$('#myInput').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...