Supprimer une colonne d'un tableau html

18 janvier 2017 à 14:36:28

Bonjour,

Sur ma page HTML j'ai un bouton "supprimer" ainsi qu'une liste des colonnes existantes, j'aimerais que lorsque l'utilisateur clique sur supprimer la colonne entière du tableau sois supprimée. J'ai déjà mis en place

Il faut savoir que mon tableau est géneré en javascript depuis un fichier csv (code ci-dessous)

JS :

/*Fonction associé au click sur le bouton supprimer*/
function supprimer() {
  var present = 0;
  var n;
  var numero_colonne_suppr;
  /*Variable qui recupere le nom de la colonne selectionnée par l'utilisateur*/
  var selection = document.getElementById('list_tableau').value;

  /*Parcourt la liste des colonnes (ici 15)*/
  for(n = 0 ; n < 15; n++) {
    /*Verifie si la colonne à supprimer est bien dans le tableau*/
    if(selection == verif_head[n]) 
      {
        present = 1;
      }
  }


  /*Gestion d'erreur : s'il la colonne voulant être supprimée n'est pas dans le tableau*/
  if(present == 0) {
    alert(selection + " n'est pas dans le tableau !");
  }

  /*Action : Suppresion de la colonne selectionnée par l'utilisateur*/
  if(present == 1) {
    alert("Suppresion de la colonne " + selection + " effectué !");
    /* /!\ CODE A CREER : Suppression de la colonne /!\ */
  }
}

HTML :

    <div id="modif_tableau">
      <input class="btn" type="button" value="AJOUTER" onclick="ajouter()"/>
      
      <span class="styled-select">
        <select id="list_tableau">
          <option value="OF" id="1">OF</option>
          <option value="ARTICLE" id="2">ARTICLE</option>
          <option value="NUMERO PLAN" id="3">NUMERO PLAN</option>
          <option value="FAMILLE" id="4">FAMILLE</option>
          <option value="COLIS" id="5">COLIS</option>
          <option value="POIDS" id="6">POIDS</option>
          <option value="INDICATEUR STOCK" id="7">INDICATEUR STOCK</option>
          <option value="QUANTITE UNITE DE MESURE" id="8">QUANTITE UNITE DE MESURE</option>
          <option value="UNITE MESURE ARTICLE" id="9">UNITE MESURE ARTICLE</option>
          <option value="LIBELLE ARTICLE" id="10">LIBELLE ARTICLE</option>
          <option value="NOM CLIENT" id="11">NOM CLIENT</opt  ion>
          <option value="DATE AS400" id="12">DATE AS400</option>
          <option value="DATE" id="13">DATE</option>
          <option value="HEURE" id="14">HEURE</option>
          <option value="HEURE (HH:MM)" id="15">HEURE (HH:MM)</option>
          <option value="POSTE COLISAGE" id="16">POSTE COLISAGE</option>
        </select>
      </span>

      <input class="btn" type="button" value="SUPPRIMER" onclick="supprimer()"/>  
    </div>

JS création du tableau :

 $.when($.get(csv_path)).then(
    function(data){
      var csv_data = $.csv.toArrays(data, csv_options);

      var table_head = "<thead><tr>";

      for (head_id = 0; head_id < csv_data[0].length; head_id++) { 
         if(head_id == 0 || head_id == 1 || head_id == 3 || head_id == 4 || head_id == 5 || head_id == 10 || head_id == 13) {
           table_head += "<th>" + csv_data[0][head_id] + "</th>";
           verif_head[head_id] = csv_data[0][head_id];
          }

         else {
          verif_head[head_id] = 0;
         }
      }

      table_head += "</tr></thead>";
      $('#my-table').append(table_head);
      $('#my-table').append("<tbody></tbody>");

      for (row_id = 1; row_id < csv_data.length; row_id++) { 
        var row_html = "<tr>";
        nbrTotColis ++;

          for (col_id = 0; col_id < csv_data[row_id].length; col_id++) {

            if(col_id == 0 || col_id == 1 || col_id == 3 || col_id == 4 || col_id == 5 || col_id == 10) {
              row_html += "<td>" + csv_data[row_id][col_id] + "</td>";
            }

Les colonnes du if sont un moyen pour l'instant de garder celles qui m'interesse mais la fonction supprimer pourrais palier à ça ensuite.

Si vous avez la moindre question sur le code etc je suis là, merci d'avoir pirs du temps pour tout lire

Az_ReHaaB

19 janvier 2017 à 10:42:40

bonjour moi j'ai un tableau éditable je te le passe comme sa tu peut prendre ce que tu veut dessus

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Tableau éditable</title>
  
  
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
  <h1><center> Tableau éditable </center></h1>
  <div id="table" class="table-editable">
    <span class="table-add glyphicon glyphicon-plus"></span>
    <table class="table">
      <tr>
        <th contenteditable="true">nom</th>
        <th contenteditable="true">Valeur</th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td contenteditable="true">a remplir</td>
        <td contenteditable="true">a remplir</td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
        <td>
          <span class="table-up glyphicon glyphicon-arrow-up"></span>
          <span class="table-down glyphicon glyphicon-arrow-down"></span>
        </td>
      </tr>
      <!-- tableau cloné -->
      <tr class="hide">
        <td contenteditable="true">a remplir</td>
        <td contenteditable="true">a remplir</td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
        <td>
          <span class="table-up glyphicon glyphicon-arrow-up"></span>
          <span class="table-down glyphicon glyphicon-arrow-down"></span>
        </td>
      </tr>
    </table>
  </div>
      <center><button id="import-btn" class="btn btn-primary">importée les données</button></center>
    <p id="import"></p>
  <center><button id="export-btn" class="btn btn-primary">exportée les données</button></center>
  <p id="export"></p>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script>

    <script src="js/index.js"></script>
    <script src="tableau.json" type="text/javascript"></script>


</body>
</html>

var $TABLE = $('#table');
var $BTN = $('#import-btn');
var $IMPORT = $('#import');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');


$('.table-add').click(function () {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('table').append($clone);
});

$('.table-remove').click(function () {
  $(this).parents('tr').detach();
});

$('.table-up').click(function () {
  var $row = $(this).parents('tr');
  if ($row.index() === 1) return; // Don't go above the header
  $row.prev().before($row.get(0));
});

$('.table-down').click(function () {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});

jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function () {
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];

  $($rows.shift()).find('th:not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });

  $rows.each(function () {
    var $td = $(this).find('td');
    var h = {};

    headers.forEach(function (header, i) {
      h[header] = $td.eq(i).text();   
    });
    
    data.push(h);
  });

  $EXPORT.text(JSON.stringify(data));

});

.table-editable {
  position: relative;
}
.table-editable .glyphicon {
  font-size: 20px;
}

.table-remove {
  color: #700;
  cursor: pointer;
}
.table-remove:hover {
  color: #f00;
}

.table-up, .table-down {
  color: #007;
  cursor: pointer;
}
.table-up:hover, .table-down:hover {
  color: #00f;
}

.table-add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 50px;
  right: 0;
}
.table-add:hover {
  color: #0b0;
}

je précise qu'il n'est pas terminer mais si sa peut t'aider alors voila