
<?php




?>


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

  <style>
    /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
    .row.content {height: 200px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #f1f1f1;
      height: 0%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 1px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 77px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height: auto;} 
    }




  </style>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #DDD;
}

tr:hover {background-color: #D6EEEE;}
</style>

</head>
<body>

<body style="height:100px">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <ul class="navbar-nav mr-auto collapse navbar-collapse">
      <li class="nav-item active">
      
      </li>
    </ul>
    <div class="my-2 my-lg-0">
  
    </div>
</nav>

<div class="container-fluid" style="margin-top:100px">
 
</div>

<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-1v">
     <div class="container">

  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
  border-collapse: collapse;
  width: 5%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 4px;
}

 


</style>
</head>
<body>




<div class="container">
  <h5>BUSCAR DELITO</h5>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buscar Aquí</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Cerrar</h4>
        </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
<style>



tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<div class="container">

<h2>Filtrar por palabra</h2>

<input id="myInput" type="text" placeholder="Ingresa alguna palabra..">



        <div class="modal-body">
 
            
            <table class="table">
  <thead class="table-primary">
    <label>Todos los delitos</label>
    <tr>
      
      <th scope="col">DELITO</th>
      <th scope="col">CODIGO SAF</th>
    
     
    </tr>
  </thead>
  <tbody>
    <Br>
            
         <?php     
            
             echo '</tr>'; echo '</tr>'; echo '</tr>';
include("conect2.php");

  
$resultados=mysqli_query($conexion, "select * FROM delitos");

while($row = mysqli_fetch_assoc( $resultados )) {

?>
 <tbody id="myTable"><?php 
    // set up a row for each record
    echo '<tr>';
    echo '<td>' . $row['EQUIPO']            .   '</td>';
    echo '<td>' . $row['DESCR']    .   '</td>';
     echo '</tr>';
}
?>
</tbody>
</table>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
      </div>
    </div>
 </div>


    <div class="col-sm-10">
 
    
    <div class="">
  

</div>
 
</div>


<script src="js/jquery.min.js"></script>
<script src="'js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $(window).load(function() {
            $(".cargando").fadeOut(10);
        });      
});
</script>



</body>
</html>
