Sujet Précédent Sujet Suivant

Tableau editable

Résolu/Fermé
hakimo111 Messages postés 5 Date d'inscription jeudi 3 mars 2016 Statut Membre Dernière intervention 4 mars 2016 - Modifié par KX le 4/03/2016 à 20:30
hakimo111 Messages postés 5 Date d'inscription jeudi 3 mars 2016 Statut Membre Dernière intervention 4 mars 2016 - 4 mars 2016 à 18:11
bonjour,

j'ai pris une Template Porto Admin pour utiliser le tableau éditable. je voudrais additionner les valeurs de deux cellule et les mettre dans une autre dans la meme ligne.

mon code JS 

(function( $ ) {

 'use strict';

 var EditableTable = {

  options: {
   addButton: '#addToTable',
   table: '#datatable-editable',
   dialog: {
    wrapper: '#dialog',
    cancelButton: '#dialogCancel',
    confirmButton: '#dialogConfirm',
   }
  },

  initialize: function() {
   this
    .setVars()
    .build()
    .events();
  },

  setVars: function() {
   this.$table    = $( this.options.table );
   this.$addButton   = $( this.options.addButton );

   // dialog
   this.dialog    = {};
   this.dialog.$wrapper = $( this.options.dialog.wrapper );
   this.dialog.$cancel  = $( this.options.dialog.cancelButton );
   this.dialog.$confirm = $( this.options.dialog.confirmButton );

   return this;
  },

  build: function() {
   this.datatable = this.$table.DataTable({
    aoColumns: [
     null,
     null,
     null,
     null,
     null,
     { "bSortable": false }
    ]
   });

   window.dt = this.datatable;

   return this;
  },

  events: function() {
   var _self = this;

   this.$table
    .on('click', 'a.save-row', function( e ) {
                      e.preventDefault();

     _self.rowSave( $(this).closest( 'tr' ) );
    })
    .on('click', 'a.cancel-row', function( e ) {
     e.preventDefault();

     _self.rowCancel( $(this).closest( 'tr' ) );
    })
    .on('click', 'a.edit-row', function( e ) {
     e.preventDefault();


     _self.rowEdit( $(this).closest( 'tr' ) );
    })
    .on( 'click', 'a.remove-row', function( e ) {
     e.preventDefault();

     var $row = $(this).closest( 'tr' );

     $.magnificPopup.open({
      items: {
       src: '#dialog',
       type: 'inline'
      },
      preloader: false,
      modal: true,
      callbacks: {
       change: function() {
        _self.dialog.$confirm.on( 'click', function( e ) {
         e.preventDefault();

         _self.rowRemove( $row );
         $.magnificPopup.close();
        });
       },
       close: function() {
        _self.dialog.$confirm.off( 'click' );
       }
      }
     });
    });

   this.$addButton.on( 'click', function(e) {
    e.preventDefault();

    _self.rowAdd();
   });

   this.dialog.$cancel.on( 'click', function( e ) {
    e.preventDefault();
    $.magnificPopup.close();
   });

   return this;
  },

  // ==========================================================================================
  // ROW FUNCTIONS
  // ==========================================================================================
  rowAdd: function() {
   this.$addButton.attr({ 'disabled': 'disabled' });

   var actions,
    data,
    $row;

   actions = [
    '<a href="#" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>',
    '<a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>',
    '<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>',
    '<a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>'
   ].join(' ');

   data = this.datatable.row.add([ '', '', '', actions ]);
   $row = this.datatable.row( data[0] ).nodes().to$();

   $row
    .addClass( 'adding' )
    .find( 'td:last' )
    .addClass( 'actions' );

   this.rowEdit( $row );

   this.datatable.order([0,'asc']).draw(); // always show fields
  },

  rowCancel: function( $row ) {
   var _self = this,
    $actions,
    i,
    data;

   if ( $row.hasClass('adding') ) {
    this.rowRemove( $row );
   } else {

    data = this.datatable.row( $row.get(0) ).data();
    this.datatable.row( $row.get(0) ).data( data );

    $actions = $row.find('td.actions');
    if ( $actions.get(0) ) {
     this.rowSetActionsDefault( $row );
    }

    this.datatable.draw();
   }
  },

  rowEdit: function( $row ) {
   var _self = this,
    data;

   data = this.datatable.row( $row.get(0) ).data();

   $row.children( 'td' ).each(function( i ) {
    var $this = $( this );

    if ( $this.hasClass('actions') ) {
     _self.rowSetActionsEditing( $row );
    } else {
     $this.html( '<input type="text"   class="form-control input-block" value="' + data[i] + '"/>' );
    }
   });
  },

  rowSave: function( $row ) {
   var _self     = this,
    $actions,
    values    = [];

   if ( $row.hasClass( 'adding' ) ) {
    this.$addButton.removeAttr( 'disabled' );
    $row.removeClass( 'adding' );
   }

   values = $row.find('td').map(function() {
    var $this = $(this);

    if ( $this.hasClass('actions') ) {
     _self.rowSetActionsDefault( $row );
     return _self.datatable.cell( this ).data();
    } else {
     return $.trim( $this.find('input').val() );
    }
   });

   this.datatable.row( $row.get(0) ).data( values );

   $actions = $row.find('td.actions');
   if ( $actions.get(0) ) {
    this.rowSetActionsDefault( $row );
   }

   this.datatable.draw();
  },

  rowRemove: function( $row ) {
   if ( $row.hasClass('adding') ) {
    this.$addButton.removeAttr( 'disabled' );
   }

   this.datatable.row( $row.get(0) ).remove().draw();
  },

  rowSetActionsEditing: function( $row ) {
   $row.find( '.on-editing' ).removeClass( 'hidden' );
   $row.find( '.on-default' ).addClass( 'hidden' );
  },

  rowSetActionsDefault: function( $row ) {
   $row.find( '.on-editing' ).addClass( 'hidden' );
   $row.find( '.on-default' ).removeClass( 'hidden' );
  }

 };

 $(function() {
  EditableTable.initialize();
 });

}).apply( this, [ jQuery ]);



mon code HTML (PHP) 

<table class="table table-bordered table-striped mb-none" id="datatable-editable">
         <thead>
          <tr>
           <th>Base</th>
           <th>Nbre Heures</th>
           <th>CU</th>
           <th>CU+</th>
           <th>CU/H</th>
           <th>Actions</th>
          </tr>
         </thead>
         <tbody>
         <tr class="gradeX">

     
          
           <td>'.$rst1.'</td>
           <td type="text"   id="nbre" name="nbre"></td>
           <td type="text" value="cu" id="cu" name="cu">'.$rst2.'</td>
           <td type="text" id="cu_posi" name="cu_posi">'.$rst3.'</td>
           <td type="text" id="somme" name="somme"></td>
           <td class="actions">
            <a href="#" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>
            <a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>
            <a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>
            <a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>
           </td>
</tr>


ce que cherche à faire est la valeur du 
<td type="text" id="somme" name="somme"></td>
= la valeur du 
<td type="text"   id="nbre" name="nbre"></td>
+ la valeur du 
<td type="text" value="cu" id="cu" name="cu">'.$rst2.'</td>


merci de votre aide
A voir également:

5 réponses

Réponse 1 / 5
canarder Messages postés 1714 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 13 mai 2018 354
4 mars 2016 à 16:19
Merci d'expliquer plus en détail le problème, pas balancer un code illisible comme ça. On ne fera pas un boulot à ta place, on peut t'aider d'un point de vue algorithmique principalement, ou t'indiquer des noms de fonctions/bibliothèques à utiliser.
Là ça donne pas du tout envie de lire quoique ce soit.

De plus > https://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java
0
Réponse 2 / 5
hakimo111 Messages postés 5 Date d'inscription jeudi 3 mars 2016 Statut Membre Dernière intervention 4 mars 2016
4 mars 2016 à 16:28
bonjour,

ce que je cherche à faire est d'additionner les valeurs de deux cellules et mettre les résultats dans une autre cellule dans la même ligne.
merci,
0
Réponse 3 / 5
canarder Messages postés 1714 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 13 mai 2018 354
Modifié par canarder le 4/03/2016 à 16:37 
<div id="fields">
  <form>
    <input type="text">
     + <input type="text">
    <input type="button" value="=">
    <input type="text">
    </form>
</div>

<script>
var fields = document.getElementById('fields');
var inputs = fields.getElementsByTagName('input');
inputs[2].addEventListener('click',
  function() {
    inputs[3].value = parseInt(inputs[0].value) + parseInt(inputs[1].value);
  }
);
</script>


J'ai pas du tout testé mais je ferais un truc qui ressemble à ça, juste pour quelques cases.
___/\_canarder_/\___
~>Un fork de Firefox avec de meilleurs choix : Pale Moon<~
0
Réponse 4 / 5
hakimo111 Messages postés 5 Date d'inscription jeudi 3 mars 2016 Statut Membre Dernière intervention 4 mars 2016
4 mars 2016 à 17:16
ton code marche très bien mais lorsque je l'utilise dans ma page ça ne donne pas de résultats.

dans mon tableau j'ai un icon modifier, lorsque je clique dessus ca me donne les résultats (image ci-joint). je rentre une valeur dans la case nbre heure et dès que je clique sur l'icon enregistrer le champs cu/H sera rempli par nbre heure+cu

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
hakimo111 Messages postés 5 Date d'inscription jeudi 3 mars 2016 Statut Membre Dernière intervention 4 mars 2016
4 mars 2016 à 18:11
c'est j'ai trouvé la solution,

var x = document.getElementsByClassName("form-control input-block");

x[4].value=x[2].value/x[1].value;
merci
0

Discussions similaires

Modèle fichier excel comparateur mutuelle
PASCALOU -
Raymond PENTIER -

1 réponse
Bibliothèque
cosjac85 -
renard bleu -

3 réponses
Formule taux de marque
vcloclo1 -
vcloclo1 -

26 réponses
generateur de combinaison du loto 5/90
Riccilo -
ccm81 -

3 réponses
Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses