2
votes

Comment rendre la colonne de table HTML modifiable?

J'ai un tableau HTML avec des données JSON, je veux rendre l'une de mes colonnes modifiable , comme si l'utilisateur clique ou double-clique sur cette cellule doit être modifiable

je n'ai pas toute idée comment y parvenir. En recherchant sur Google, j'ai trouvé que en utilisant ceci, je peux rendre les cellules modifiables mais dynamiquement je ne sais pas comment l'utiliser

SNIPPET

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table id="HourlysalesSummary"></table>

$(document).ready(function() {

  var tableData = [{
      "Category Code": "C001",
      "Category Name": "Beverages",
      "Quantity": "3174.0000"

    },
    {
      "Category Code": "C003",
      "Category Name": "Juices",
      "Quantity": "36.0000"

    },
    {
      "Category Code": "C004",
      "Category Name": "Soups",
      "Quantity": "5.0000"

    },
    {
      "Category Code": "C005",
      "Category Name": "Cookies",
      "Quantity": "10.0000"

    },
    {
      "Category Code": "C006",
      "Category Name": "Buns",
      "Quantity": "258.0000"

    },
    {
      "Category Code": "C007",
      "Category Name": "Breads",
      "Quantity": "184.0000"

    },
    {
      "Category Code": "C008",
      "Category Name": "Rusks",
      "Quantity": "62.0000"

    },
    {
      "Category Code": "C009",
      "Category Name": "Biscuits",
      "Quantity": "55.0000"

    },
    {
      "Category Code": "C010",
      "Category Name": "Puff",
      "Quantity": "53.0000"

    },
    {
      "Category Code": "C011",
      "Category Name": "Savouries",
      "Quantity": "343.2500"

    },
    {
      "Category Code": "C012",
      "Category Name": "Cake",
      "Quantity": "19.0000"

    }

  ]


  function addTable(tableValue) {
    var col = Object.keys(tableValue[0]);
    var countNum = col.filter(i => !isNaN(i)).length;
    var num = col.splice(0, countNum);
    col = col.concat(num);
    var table = document.createElement("table");
    var tr = table.insertRow(-1); // TABLE ROW.
    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th"); // TABLE HEADER.
      th.innerHTML = col[i];
      tr.appendChild(th);
      tr.classList.add("text-center");
      tr.classList.add("head")
    }
    for (var i = 0; i < tableValue.length; i++) {
      tr = table.insertRow(-1);
      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        var tabledata = tableValue[i][col[j]];
        if (tabledata && !isNaN(tabledata)) {
          tabledata = parseInt(tabledata).toLocaleString('en-in')
        }
        if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
          //i want to make this cell editable
          tabCell.innerHTML = tabledata;
        } else {
          span = document.createElement("span");
          span.innerHTML = tabledata;
          tabCell.appendChild(span)
        }
        if (j > 1)

          tabCell.classList.add("text-right");

      }
    }
    var divContainer = document.getElementById("HourlysalesSummary");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
    table.classList.add("table-hover");

  }
  addTable(tableData);

});

Je souhaite rendre les données de colonne Quantité modifiables S'il vous plaît, n'importe qui ici pourrait me guider avec de bonnes approches serait très utile.

javascript jquery html

2 commentaires

une technique assez souvent utilisée consiste à avoir un champ de saisie à l'intérieur de la cellule qui n'est pas visible, puis à l'afficher / le cacher si nécessaire. Sinon, vous avez également l'attribut contenteditable sur certaines balises html

lisez juste maintenant. On dirait que quelqu'un vous a déjà fourni cet exemple, donc pas besoin :)

3 Réponses :

4
votes

Vous pouvez utiliser l'attribut contenteditable en cas de cellules de quantité:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table id="HourlysalesSummary"></table>

$(document).ready(function() {

  var tableData = [{
      "Category Code": "C001",
      "Category Name": "Beverages",
      "Quantity": "3174.0000"

    },
    {
      "Category Code": "C003",
      "Category Name": "Juices",
      "Quantity": "36.0000"

    },
    {
      "Category Code": "C004",
      "Category Name": "Soups",
      "Quantity": "5.0000"

    },
    {
      "Category Code": "C005",
      "Category Name": "Cookies",
      "Quantity": "10.0000"

    },
    {
      "Category Code": "C006",
      "Category Name": "Buns",
      "Quantity": "258.0000"

    },
    {
      "Category Code": "C007",
      "Category Name": "Breads",
      "Quantity": "184.0000"

    },
    {
      "Category Code": "C008",
      "Category Name": "Rusks",
      "Quantity": "62.0000"

    },
    {
      "Category Code": "C009",
      "Category Name": "Biscuits",
      "Quantity": "55.0000"

    },
    {
      "Category Code": "C010",
      "Category Name": "Puff",
      "Quantity": "53.0000"

    },
    {
      "Category Code": "C011",
      "Category Name": "Savouries",
      "Quantity": "343.2500"

    },
    {
      "Category Code": "C012",
      "Category Name": "Cake",
      "Quantity": "19.0000"

    }

  ]


  function addTable(tableValue) {
    var col = Object.keys(tableValue[0]);
    var countNum = col.filter(i => !isNaN(i)).length;
    var num = col.splice(0, countNum);
    col = col.concat(num);
    var table = document.createElement("table");
    var tr = table.insertRow(-1); // TABLE ROW.
    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th"); // TABLE HEADER.
      th.innerHTML = col[i];
      tr.appendChild(th);
      tr.classList.add("text-center");
      tr.classList.add("head")
    }
    for (var i = 0; i < tableValue.length; i++) {
      tr = table.insertRow(-1);
      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        var tabledata = tableValue[i][col[j]];
        if (tabledata && !isNaN(tabledata)) {
          tabledata = parseInt(tabledata).toLocaleString('en-in')
        }
        if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
          //i want to make this cell editable
          tabCell.setAttribute('contenteditable', true); // <--- ADDING HERE
          tabCell.innerHTML = tabledata;
        } else {
          span = document.createElement("span");
          span.innerHTML = tabledata;
          tabCell.appendChild(span)
        }
        if (j > 1)

          tabCell.classList.add("text-right");

      }
    }
    var divContainer = document.getElementById("HourlysalesSummary");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
    table.classList.add("table-hover");

  }
  addTable(tableData);

});

tabCell.setAttribute('contenteditable', true);

Une autre technique assez souvent utilisée consiste à masquer / afficher une entrée à l'intérieur de la cellule lorsque cela est nécessaire

0 commentaires

1
votes

Vous devez ajouter un écouteur d'événements à vos cellules du tableau (td) , l'événement doit être un événement de double-clic (dblclick) , notez également que nous devons créer une variable activeCell à stocker, quelle cellule est activée,

let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
    cell.addEventListener('dblclick', function() {
        if(this.childElementCount == 0) {
            let input = document.createElement('input');
            input.setAttribute('type', 'textbox');
            input.setAttribute('value', this.innerHTML);
            this.innerHTML = "";
            this.appendChild(input);
            activeCell = this;
        }
    });
}
document.addEventListener('mouseup', function(e) {
    if(activeCell != null) {
        let container = activeCell.children[0];
        if (!$(container).is(e.target) && $(container).has(e.target).length === 0) 
        {
            activeCell.innerHTML = container.value;
            activeCell = null;
        }
    }
});

Sur l'écouteur d'événements pour faire le bloc de code, vous devez faire innerHTML de la cellule est une entrée ou une zone de texte avec JavaScript,

document.addEventListener('mouseup', function(e) {
    if(activeCell != null) {
        let container = activeCell.children[0];
        if (!$(container).is(e.target) && $(container).has(e.target).length === 0) 
        {
            activeCell.innerHTML = container.value;
            activeCell = null;
        }
    }
});

Lorsque l'utilisateur, clique en dehors de la cellule de tableau activée, enregistre la nouvelle valeur de l'entrée de la cellule et en fait un texte normal, avec l'écouteur d'événement mouseup ,

for(let cell of cells) {
    cell.addEventListener('dblclick', function() {
        if(this.childElementCount == 0) {
            let input = document.createElement('input');
            input.setAttribute('type', 'textbox');
            input.setAttribute('value', this.innerHTML);
            this.innerHTML = "";
            this.appendChild(input);
            activeCell = this;
        }
    });
}

J'ai utilisé des méthodes avec JQuery, ce sont .is et .has pour vérifier que l'objet cliqué n'est pas activé dans la cellule.

Le code final est , ressemble à ceci,

let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
    cell.addEventListener('dblclick', function() {
        // to do
    });
}

Passez une bonne journée :)

4 commentaires

hé, j'ai essayé votre code, il fonctionne bien mais le problème est de cliquer, il devient un champ de saisie mais lorsque j'appuie sur onglet ou en cliquant avec la souris sur une nouvelle cellule pour éditer que la première ne revient pas à la cellule plutôt qu'au champ de saisie

en cliquant dans le champ de saisie cela s'affiche.

Je voulais juste vous dire quelle approche vous devriez suivre. D'autres choses sont liées à votre travail. Après cela, vous devez détecter un clic en dehors de l'événement d'entrée et lorsque cet événement est déclenché, vous devez insérer le texte interne de la cellule sur la valeur de l'entrée et supprimer l'élément d'entrée.

D'accord, ce sera ici avec la mise à jour de la réponse @dheerajkumar

1
votes

Ajoutez ce qui suit à la fin du script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table id="HourlysalesSummary"></table>

$(document).ready(function() {

  var tableData = [{
      "Category Code": "C001",
      "Category Name": "Beverages",
      "Quantity": "3174.0000"

    },
    {
      "Category Code": "C003",
      "Category Name": "Juices",
      "Quantity": "36.0000"

    },
    {
      "Category Code": "C004",
      "Category Name": "Soups",
      "Quantity": "5.0000"

    },
    {
      "Category Code": "C005",
      "Category Name": "Cookies",
      "Quantity": "10.0000"

    },
    {
      "Category Code": "C006",
      "Category Name": "Buns",
      "Quantity": "258.0000"

    },
    {
      "Category Code": "C007",
      "Category Name": "Breads",
      "Quantity": "184.0000"

    },
    {
      "Category Code": "C008",
      "Category Name": "Rusks",
      "Quantity": "62.0000"

    },
    {
      "Category Code": "C009",
      "Category Name": "Biscuits",
      "Quantity": "55.0000"

    },
    {
      "Category Code": "C010",
      "Category Name": "Puff",
      "Quantity": "53.0000"

    },
    {
      "Category Code": "C011",
      "Category Name": "Savouries",
      "Quantity": "343.2500"

    },
    {
      "Category Code": "C012",
      "Category Name": "Cake",
      "Quantity": "19.0000"

    }

  ]


  function addTable(tableValue) {
    var col = Object.keys(tableValue[0]);
    var countNum = col.filter(i => !isNaN(i)).length;
    var num = col.splice(0, countNum);
    col = col.concat(num);
    var table = document.createElement("table");
    var tr = table.insertRow(-1); // TABLE ROW.
    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th"); // TABLE HEADER.
      th.innerHTML = col[i];
      tr.appendChild(th);
      tr.classList.add("text-center");
      tr.classList.add("head")
    }
    for (var i = 0; i < tableValue.length; i++) {
      tr = table.insertRow(-1);
      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        var tabledata = tableValue[i][col[j]];
        if (tabledata && !isNaN(tabledata)) {
          tabledata = parseInt(tabledata).toLocaleString('en-in')
        }
        if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
          //i want to make this cell editable
          tabCell.innerHTML = tabledata;
        } else {
          span = document.createElement("span");
          span.innerHTML = tabledata;
          tabCell.appendChild(span)
        }
        if (j > 1)

          tabCell.classList.add("text-right");

      }
    }
    var divContainer = document.getElementById("HourlysalesSummary");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
    table.classList.add("table-hover");

  }
  addTable(tableData);
  $('.text-right').attr('contenteditable', true);
});

 $('.text-right').attr('contenteditable', true);

1 commentaires

c'est assez sujet aux erreurs. text-right est utilisé par bootstrap pour aligner le texte vers la droite. De cette façon, vous rendrez tous ces éléments modifiables