1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
| <form method="POST" id="form" name="form">
<div class="top-shadow">
<table class="flatTable" table border="0" CELLSPACING="0" >
<tr class="titleTr">
<td class="titleTd">Liste des capteurs</td>
<td colspan="4"></td>
<td class="plusTd button"></td>
<td class="plusTd3 button"></td>
</div>
</tr>
<tr class="headingTr">
<td>Index du capteur</td>
<td><center>Nom du capteur</center></td>
<td><center>Identifiant du capteur</center></td>
<td><center>Type du capteur</center></td>
<td><center>Table correspondant au capteur</center></td>
<td><center>Supprimer le capteur</center></td>
<td><center>Edition </center></td>
<td></td>
</tr>
<?php
//Affichage des informations
$data= array();
while ($tab_contenu=mysql_fetch_array($reponse)){
$data[] = array($tab_contenu[0], $tab_contenu[1], $tab_contenu[2], $tab_contenu[3], $tab_contenu[4]);
?>
<tr class="contenu">
<td><center><?php echo $tab_contenu['Arexx_index']; ?></center></td>
<td><center><?php echo $tab_contenu['Arexx_Name']; ?></center></td>
<td><center><?php echo $tab_contenu['Arexx_Id']; ?></center></td>
<td><center><?php echo $tab_contenu['Arexx_Type']; ?></center></td>
<td><center><?php echo $tab_contenu['Arexx_Table']; ?></center></td>
<section title=".squaredFour">
<!-- .squaredFour -->
<div class="squaredFour">
<td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="<?php echo $tab_contenu['Arexx_index']; ?>" /></td>
<label for="squaredFour"></label>
</div>
<!-- end .squaredFour -->
</section>
<td class="controlTd"></td>
<td class="controlTd1"></td>
</tr>
<?php } var_dump($data, json_encode(!empty($data) ? $data : array())); ?>
<script type="text/javascript">
var data = <?= json_encode(!empty($data ) ? $data : array()); ?>
</script>
<script type="text/javascript">
var data = <?= json_encode(!empty($data ) ? $data : array()); ?>
var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index'];
$('.controlTd').on('click', function () {
if (!$('.contenu').hasClass('isEditable')) {
$(".contenu td center").each(function(){
var contenuElement = $(this).text();
$(this).html("<input class='modif_input'STYLE='Text-ALIGN:center'/>");
$(this).children("input").val(contenuElement);
});
$('.contenu .controlTd1').empty().append('<button class="btn btn-danger" type="button">Annuler</button>');
$('.contenu').addClass('isEditable');
}
});
$('.controlTd1').on('click', function () {
if ($('.contenu').hasClass('isEditable')) {
$('.contenu').each(function () {
$tr = $(this);
$tr.find('td center').each(function (index) {
$(this).find('input[type="text"]').remove();
$(this).text(data[$tr.index()][keyByIndex[index]]);
});
$tr.find('.controlTd1').empty();
});
$('.contenu').removeClass('isEditable');
}
});
// Délégation d'événement car le <button> n'est pas créer lors de la déclaration de l'événement.
$('.controlTd1').on('click', 'button', function () {
var $this = $(this),
$tr = $this.closest('tr'),
$cells = $tr.find('td');
$cells.each(function (index, elt) {
$(this).find('input[type="text"]').remove();
$(this).find('center').text(data[$tr.index()][keyByIndex[index]]);
});
});
</script>
</table> |
Lignes d'un tableau éditables
Répondre avec citation
Partager