<! DOCTYPE html>  
<html>  
  
<style>  
 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');  
body {  
  font-family: 'Montserrat', sans-serif;  
  padding: 0;  
  margin: 0;  
  text-align: center;  
}  
h1 {  
  position: relative;  
  padding: 0;  
  margin: 10;  
  font-family: "Raleway", sans-serif;  
  font-weight: 300;  
  font-size: 40px;  
  color: #080808;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;   
}  
tr:nth-of-type(odd) {   
    background: #eee;   
    }  
    th {   
    background: #3498db;   
    color: white;   
    font-weight: bold;   
    }  
  
@import "compass/css3";  
.table-editable {  
  position: relative;  
  .glyphicon {  
    font-size: 20px;  
  }  
}  
table {   
    width: 750px;   
    border-collapse: collapse;   
    margin:50px auto;  
    }  
    td, th {   
    padding: 10px;   
    border: 1px solid #ccc;   
    text-align: left;   
    font-size: 18px;  
    }  
.table-remove {  
  color: #700;  
  cursor: pointer;  
  &:hover {  
    color: #f00;  
  }  
}  
.table-up {  
  color: #007;  
  cursor: pointer;  
  &:hover {  
    color: #00f;  
  }  
}  
.table-down {  
  color: #007;  
  cursor: pointer;  
  &:hover {  
    color: #00f;  
  }  
}  
.table-add {  
  color: #070;  
  cursor: pointer;  
  position: absolute;  
  top: 8px;  
  right: 0;  
  &:hover {  
    color: #0b0;  
  }  
}  
</style>  
<body>  
<div class="container">  
  <h1> JavaScript Editable Table </h1>  
  <div id="table" class="table-editable">  
    <table class="table">  

      <thead>
                                        <tr> 
                                           <th >N° Dossier </th>
                                           <th >Nom patient</th>
                                           <th >Medicament</th>
                                            <th >Quantite</th>
                                             <th >Posologie</th>
                                           <th >Date</th>

                                           <th style="width: 15%;"> Actions</th>
                                       </tr>
                                    </thead>
         <?php 
       $req_sql="SELECT *  FROM ordonnances as o, patients as p where o.id_patient=p.id and o.id_patient='$id_patient'";}
     
       $query_consult=mysqli_query($con,$req_sql);

         while ($row_consult = mysqli_fetch_array($query_consult) ) {  ?>
         <tr>
          <td > <?php echo $row_consult['id_patient']; ?> </td>
          <td > <?php echo $row_consult['nom']." ".$row_consult['prenom']; ; ?> </td>
          <td > <?php echo $row_consult['nom_medicament']; ?> </td>
            <td > <?php echo $row_consult['quantite']; ?> </td>
              <td > <?php echo $row_consult['posologie']; ?> </td>
          <td > <?php $date=date_create($row_consult['date_creation']);  echo date_format($date,"d/m/Y H:i"); ?> </td>
          
      

    </table>  
  </div>  
</div>  
 
<script>  
var $TABLE = $('#table');  
var $BTN = $('#export-btn');  
var $EXPORT = $('#export');  
$('.table-add').click(function () {  
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');  
  $TABLE.find('table').append($clone);  
});  
$('.table-remove').click(function () {  
  $(this).parents('tr').detach();  
});  
$('.table-up').click(function () {  
  var $row = $(this).parents('tr');  
  if ($row.index() === 1) return;   
  $row.prev().before($row.get(0));  
});  
$('.table-down').click(function () {  
  var $row = $(this).parents('tr');  
  $row.next().after($row.get(0));  
});  
jQuery.fn.pop = [].pop;  
jQuery.fn.shift = [].shift;  
$BTN.click(function () {  
  var $rows = $TABLE.find('tr:not(:hidden)');  
  var headers = [];  
  var data = [];  
    $($rows.shift()).find('th:not(:empty)').each(function () {  
    headers.push($(this).text().toLowerCase());  
  });  
  $rows.each(function () {  
    var $td = $(this).find('td');  
    var h = {};  
        headers.forEach(function (header, i) {  
      h[header] = $td.eq(i).text();     
    });  
        data.push(h);  
  });  
    });  
</script>  
</body>  
</html>  