Tableau editable

Résolu

hakimo111 Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
hakimo111 Messages postés 5 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Tableau editable
Tableau word - Guide
Tableau ascii - Guide
Trier un tableau excel - Guide
Tableau croisé dynamique - Guide
Imprimer tableau excel sur une page - Guide

5 réponses

Réponse 1 / 5

canarder Messages postés 1714 Date d'inscription Statut Membre Dernière intervention 355

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

Réponse 2 / 5

hakimo111 Messages postés 5 Date d'inscription Statut Membre Dernière intervention

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,

Réponse 3 / 5

canarder Messages postés 1714 Date d'inscription Statut Membre Dernière intervention 355

<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<~

Réponse 4 / 5

hakimo111 Messages postés 5 Date d'inscription Statut Membre Dernière intervention

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

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 Statut Membre Dernière intervention

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

Discussions similaires

Formule taux de marque

Tableau croisé dynamique - absence de certaines données

generateur de combinaison du loto 5/90

Votre réponse

Discussions similaires