Ajouter un bouton delete dans les lignes de la table
Bonjour,
J'aurais aimé savoir comment vous pouvez résoudre ce problème. Je suis capable d'ajouter des lignes avec un bouton supprimer mais concernant les lignes existantes, le bouton supprimer n'apparait pas.
je suis guère bon en javascript, donc, une petite aide serait fortement appréciée.
merci.
le PHP/HTML
Code:
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
| <table id="myTableAttributesOptions" class="table table-sm table-hover order-list-bot">
<thead>
<tr class="dataTableHeadingRow">
<td><?php echo $OSCOM_ProductsAttributesNew->getDef('text_heading_attributes_option_value_name'); ?></td>
<td><?php echo $OSCOM_ProductsAttributesNew->getDef('text_heading_attributes_image'); ?></td>
<td><?php echo $OSCOM_ProductsAttributesNew->getDef('text_heading_attributes_sort_order'); ?></td>
<td class="text-md-right"><?php echo $OSCOM_ProductsAttributesNew->getDef('text_heading_attributes_actions'); ?></td>
</tr>
</thead>
<tbody>
<?php
$i = 0;
while ($QoptionsValue->fetch()) {
?>
<tr>
<td><?php echo HTML::inputField('name[' . $i . ']', $QoptionsValue->value('name'), 'id="name[' . $i . ']"'); ?></td>
<td><?php echo HTML::inputField('image[' . $i . ']', $QoptionsValue->value('image'), 'id="image[' . $i . ']"'); ?></td>
<td class="text-md-right"><?php echo HTML::inputField('sort_order[' . $i . ']', $QoptionsValue->value('sort_order'), 'id="sort_order[' . $i . ']"'); ?></td>
<td class="text-md-right"><a id="deleteRowBot[<?php echo $i; ?>]" class="deleteRowBot"></a></td>
</tr>
<?php
$i = $i +1;
}
?>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<input type="button" class="btn btn-lg btn-block " id="addRowBot" value="<?php echo $OSCOM_ProductsAttributesNew->getDef('text_add_row'); ?>" />
</td>
</tr>
</tfoot>
</table> |
javascript
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <script>
$(document).ready(function () {
var counter = <?php echo $i; ?>
$("#addRowBot").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="name[' + counter + ']"/></td>';
cols += '<td><input type="text" class="form-control" name="image[' + counter + ']"/></td>';
cols += '<td><input type="text" class="form-control" name="sort_order[' + counter + ']"/></td>';
cols += '<td><input type="button" class="ibtnDelBot btn btn-md btn-danger" id="deleteRowBot[' + counter + ']" value="<?php echo $button_delete; ?>"></td>';
newRow.append(cols);
$("table.order-list-bot").append(newRow);
counter++;
});
$("table.order-list-bot").on("click", ".ibtnDelBot", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
</script> |
code html
cette ligne ne s'affiche pas quand il y a des valeur existante dans le tableau.
Code:
<td width="10%"><a id="deleteRowBot[2]" class="deleteRowBot ibtnDelBot"></a></td>
Code:
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
| <table id="myTableAttributesOptions" class="table table-sm table-hover order-list-option">
<thead>
<tr class="dataTableHeadingRow">
<td>text_heading_attributes_option_value_name</td>
<td>text_heading_attributes_image</td>
<td>text_heading_attributes_sort_order</td>
<td class="text-md-right">text_heading_attributes_actions</td>
</tr>
</thead>
<tbody>
<tr>
<td><input name="name[0]" value="Small" id="name[0]" class="form-control" type="text"></td>
<td><input name="image[0]" id="image[0]" class="form-control" type="text"></td>
<td class="text-md-right"><input name="sort_order[0]" value="1" id="sort_order[0]" class="form-control" type="text"></td>
<td width="10%"><a id="deleteRowBot[0]" class="deleteRowBot ibtnDelBot"></a></td>
</tr>
<tr>
<td><input name="name[1]" value="Medium" id="name[1]" class="form-control" type="text"></td>
<td><input name="image[1]" id="image[1]" class="form-control" type="text"></td>
<td class="text-md-right"><input name="sort_order[1]" value="2" id="sort_order[1]" class="form-control" type="text"></td>
<td width="10%"><a id="deleteRowBot[1]" class="deleteRowBot ibtnDelBot"></a></td>
</tr>
<tr>
<td><input name="name[2]" value="Large" id="name[2]" class="form-control" type="text"></td>
<td><input name="image[2]" id="image[2]" class="form-control" type="text"></td>
<td class="text-md-right"><input name="sort_order[2]" value="3" id="sort_order[2]" class="form-control" type="text"></td>
<td width="10%"><a id="deleteRowBot[2]" class="deleteRowBot ibtnDelBot"></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<input class="btn btn-lg btn-block " id="addRowBot" value="text_add_row" type="button">
</td>
</tr>
</tfoot>
</table> |
