Блог

Главная - Вопросы по программированию - Поиск по таблице данных HTML

Поиск по таблице данных HTML

#html #file #csv #search

#HTML #файл #csv #Поиск

Вопрос:

У меня есть некоторый код (как показано ниже), который позволяет мне открывать и отображать CSV-файл в Firefox из папки на моем жестком диске. Я хотел бы добавить окно поиска, чтобы оно фильтровало список при вводе текста. Я видел несколько других рабочих примеров, в которых данные таблицы хранились между тегами, но я не могу заставить это работать, когда данные извлекаются из внешнего расположения файла. Я действительно новичок в JavaScript, и это немного выше моего понимания, поэтому, если у кого-нибудь есть какие-либо указания, я был бы признателен..

 <!DOCTYPE html>
<html>
 <head>
  <title>CSV File to HTML Table Using AJAX jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    table {
  border-collapse: collapse;
  width: 75%;
  border: 1px solid #ddd;
  font-size: 12px;
}
    tr:hover {background-color:#87CEEB;}
  </style>
 </head>
 <body>
  <div class="container">
   <div class="table-responsive">
    <h1 align="center">Adult Nursing - Absences Informed</h1>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

    <table id="table">
    <tr class="tr">


    <br />
    <div align="center">
     <button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
    </div>
    <br />
    <div id="employee_table">
    </div>
   </div>
  </div>
 </body>
</html>

<script>

$(document).ready(function(){
 $('#load_data').click(function(){
  $.ajax({
   url:"all_absences.csv",
   dataType:"text",
   success:function(data)
   {
    var employee_data = data.split(/r?n|r/);
    var table_data = '<table class="table table-bordered table-striped">';
    for(var count = 0; count<employee_data.length; count  )
    {
     var cell_data = employee_data[count].split(",");
     table_data  = '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count  )
     {
      if(count === 0)
      {
       table_data  = '<th>' cell_data[cell_count] '</th>';
      }
      else
      {
       table_data  = '<td>' cell_data[cell_count] '</td>';
      }
     }
     table_data  = '</tr>';
    }
    table_data  = '</table>';
    $('#employee_table').html(table_data);
   }
  });
 });

});

</script>

Ответ №1:

Попробуйте это решение : 

     <!DOCTYPE html>
<html>
 <head>
  <title>CSV File to HTML Table Using AJAX jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    table {
  border-collapse: collapse;
  width: 75%;
  border: 1px solid #ddd;
  font-size: 12px;
}
    tr:hover {background-color:#87CEEB;}
  </style>
 </head>
 <body>
  <div class="container">
   <div class="table-responsive">
    <h1 align="center">Adult Nursing - Absences Informed</h1>
    <input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names..">

    <table id="table">
    <tr class="tr">


    <br />
    <div align="center">
     <button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
    </div>
    <br />
    <div id="employee_table">
    </div>
   </div>
  </div>
 </body>
</html>

<script>
var searchKey = "";
function myFunction(e){
    searchKey = e.value;
}

$(document).ready(function(){
 $('#load_data').click(function(){
  $.ajax({
   url:"all_absences.csv",
   dataType:"text",
   success:function(data)
   {
    var employee_data = data.split(/r?n|r/);
    var table_data = '<table class="table table-bordered table-striped">';
    for(var count = 0; count<employee_data.length; count  )
    {
     var cell_data = employee_data[count].split(",");
     table_data  = '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count  )
     {
      if(count === 0)
      {
       table_data  = '<th>' cell_data[cell_count] '</th>';
      }
      else
      {
        if(!cell_data[cell_count].includes(searchKey) amp;amp; cell_count == 0){
          break;
        }
          table_data  = '<td>' cell_data[cell_count] '</td>';
      }
     }
     table_data  = '</tr>';
    }
    table_data  = '</table>';
    $('#employee_table').html(table_data);
   }
  });
 });

});

</script>

Имейте в виду, что это решение работает, только если вы собираетесь выполнять поиск только в первом столбце

Комментарии:

1. Привет, спасибо за это, это действительно полезно. 🙂 В идеале я хотел бы попробовать выполнить поиск по идентификатору или фамилии, но я попробую добавить это сам.

2. Если вы могли бы это сделать, пожалуйста, опубликуйте код после его добавления

3. Подойдет, хотя может потребоваться некоторое время 🙂

4. На самом деле я только что столкнулся с проблемой …. КОМПЬЮТЕР, который я использую для этого на работе, не запускает код через Firefox (более старую версию), как это было дома (последняя версия). Вместо этого я получаю ошибку: TypeError: cell_data[cell_count].includes — это не функция, есть идеи?

5. Попробуйте запустить ее на локальном хостинге, используя xampp или wamp