Commit 609efa9a authored by Raulin's avatar Raulin

formulaire aliment

parent b4341613
......@@ -3,43 +3,101 @@
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
>
<script type="text/javascript">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table_aliments').DataTable();
} );
</script>
</head>
<table id="table_aliments" class="dataTable" style="color : black">
<section id="aliments_contenu" style="display : flex; flex-direction : row; ">
<div style="margin-right:100px">
<table id="table_aliments" class="dataTable" style="color : #212529; ">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Aliment</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Fromage</td>
<td>Laitage</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Pâtes</td>
<td>Féculent</td>
</tr>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Haricots verts</td>
<td>Légumes</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>deja la</td>
<td>dela la </td>
</tr>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>deja la </td>
<td>deja la </td>
</tr>
<tr>
<td>deja la</td>
<td>dela la </td>
</tr>
<tr>
<td>deja la </td>
<td>deja la </td>
</tr>
<tr>
<td>deja la</td>
<td>dela la </td>
</tr>
<tr>
<td>deja la </td>
<td>deja la </td>
</tr>
<tr>
<td>deja la</td>
<td>dela la </td>
</tr>
<tr>
<td>deja la </td>
<td>deja la </td>
</tr>
<tr>
<td>deja la</td>
<td>dela la </td>
</tr>
<tr>
<td>deja la </td>
<td>deja la </td>
</tr>
<tr>
<td>deja la</td>
<td>dela la </td>
</tr>
<tr>
<td>deja la </td>
<td>deja la </td>
</tr>
<tr>
<td>deja la</td>
<td>dela la </td>
</tr>
<tr>
<td>deja la </td>
<td>deja la </td>
</tr>
<tr>
<td>deja la</td>
<td>dela la </td>
</tr>
<tr>
<td>deja la </td>
<td>deja la </td>
</tr>
<!-- <tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
......@@ -306,7 +364,35 @@
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tr> -->
</tbody>
</table>
\ No newline at end of file
</table>
</div>
<div>
<table>
<tr>
<td>
<form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
<div>
<label>Aliment</label>
<input type="text" name="aliment" id="aliment" required>
</div>
<div>
<label>Type d'aliment : </label>
<select id="type" size="1">
<option value="fruit"> Fruit </option>
<option value="legume"> Legume </option>
</select>
</div>
<div class="form-action-buttons">
<input type="submit" value="Ajouter">
</div>
</form>
</td>
</tr>
<script src="crud.js"></script>
</table>
</div>
</section>
\ No newline at end of file
......@@ -9852,3 +9852,5 @@ form .row:first-child .floating-label-form-group {
background-color: #1a252f;
}
var selectedRow = null
function onFormSubmit() {
var formData = readFormData();
if (selectedRow == null)
insertNewRecord(formData);
else
updateRecord(formData);
resetForm();
}
function readFormData() {
var formData = {};
formData["aliment"] = document.getElementById("aliment").value;
formData["type"] = document.getElementById("type").value;
return formData;
}
function insertNewRecord(data) {
var table = document.getElementById("table_aliments").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
cell1 = newRow.insertCell(0);
cell1.innerHTML = data.aliment;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.type;
cell3 = newRow.insertCell(2);
cell3.innerHTML = `<a onClick="onEdit(this)">Edit</a>
<a onClick="onDelete(this)">Delete</a>`;
}
function resetForm() {
document.getElementById("aliment").value = "";
document.getElementById("type").value = "";
selectedRow = null;
}
function onEdit(td) {
selectedRow = td.parentElement.parentElement;
document.getElementById("aliment").value = selectedRow.cells[0].innerHTML;
document.getElementById("type").value = selectedRow.cells[1].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.aliment;
selectedRow.cells[1].innerHTML = formData.type;
}
function onDelete(td) {
if (confirm("Supprimer l'élément ?")) {
row = td.parentElement.parentElement;
document.getElementById("table_aliments").deleteRow(row.rowIndex);
resetForm();
}
}
\ No newline at end of file
......@@ -16,7 +16,7 @@ if(isset($_GET['page'])){
<div class="container d-flex align-items-center flex-column">
<!-- Masthead Heading -->
<h2 class="masthead-heading text-uppercase mb-0"><?php echo $mymenu[$currentPageId][0] ?></h2>
<!-- <h2 class="masthead-heading text-uppercase mb-0"><?php echo $mymenu[$currentPageId][0] ?></h2> -->
<!-- Masthead Subheading -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment