Ajouter un bouton delete dans les lignes de la table

**oitsuki** · 09/01/2018, 00h02

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<td width="10%"><a id="deleteRowBot[2]" class="deleteRowBot ibtnDelBot"></a></td>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 09/01/2018, 16h47

Bonjour,

cette ligne ne s'affiche pas quand il y a des valeur existante dans le tableau.

il faut que ta balise est du contenu pour quelle apparaisse, par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<td width="10%"><a id="deleteRowBot[2]" class="deleteRowBot ibtnDelBot">Delete</a></td>

**oitsuki** · 09/01/2018, 17h32

Merci.
J'ai essayé cette option mais cela n'a pas fonctionné

**NoSmoking** · 10/01/2018, 09h41

Qu'est ce qui ne fonctionne pas, sans plus de détails ... !?!

**oitsuki** · 10/01/2018, 14h46

cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

deleteRowBot[2]

, [x] que j'ai testé, n'affihe pas le bouton supprimé sur la droite.

**NoSmoking** · 10/01/2018, 15h23

du mal à comprendre ce que tu essaies de dire !!!!

Essaie de mettre le texte en dur lors de la création.

Je note également qu'il y a du PHP dans ton code javascript, regarde donc le code HTML généré (CTR + U) pour voir si tu n'as pas d'erreur.

Ajouter un bouton delete dans les lignes de la table

jQuery

Discussions similaires

Partager

Partager