Dev Faq
2
votes

Comment créer une table dynamique à l'aide de JQuery?

Je voudrais créer une table dynamique à l'aide de JQuery, puis ajouter la table au DOM. Habituellement, j'ai utilisé la méthode de concaténation de chaînes pour créer la table. Cette fois, j'aimerais faire cela avec JQuery. Une chose que j'ai du mal à obtenir est l'ouverture / la fermeture de l'élément tr tout en bouclant sur plusieurs lignes. Voici un exemple si mon code: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="start" id="start" value="Start" />
<div id="container"></div>
.display {
  width: 500px;
  background-color: red;
}
.display,
.display th,
.display td{
  border: 1px solid blue;
}
var data = {
  "1": {
    "fname": "Jon",
    "lname": "Wayne",
    "dob": "05/14/1987",
    "status": "Active",
    "color": "Red",
    "team": "Miami"
  },
  "2": {
    "fname": "Tim",
    "lname": "Ryan",
    "dob": "01/23/1967",
    "status": "Inactive",
    "color": "Blue",
    "team": "Chicago"
  },
  "3": {
    "fname": "Jim",
    "lname": "Carey",
    "dob": "11/02/1997",
    "status": "Suspended",
    "color": "Yellow",
    "team": "Denver"
  },
  "4": {
    "fname": "Chuck",
    "lname": "Norris",
    "dob": "09/06/1945",
    "status": "Active",
    "color": "Green",
    "team": "Boston"
  }
}

$('#start').on('click', showRecords);
function showRecords() {
  displayData(1,data);
}

function displayData(fnid,data) {
		var tbl = $('<table>').addClass('display').prop('id','data_tbl'),
			thead = $('<thead>'),
			tbody = $('<tbody>'),
			tr = $('<tr>');
			title = ['First Name','Last Name','DOB','Status','Color','Team'];

		/*** Start: Table Header ***/
		thead.append('<tr>');
		for(var i=0; i < title.length; i++) {
			if(fnid == 1){
				if(i <= 3) {
					thead.append($('<th>').text(title[i]));
				}
			}else{
				thead.append($('<th>').text(title[i]));
			}
		}
		thead.append('</tr>');
		/*** End: Table Header ***/

		/*** Start: Table Body ***/
		for(key in data) {
			tbody.append('<tr>');
			tbody.append($('<td>').text(data[key].fname));
			tbody.append($('<td>').text(data[key].lname));
			tbody.append($('<td>').text(data[key].dob));
			tbody.append($('<td>').text(data[key].status));
			if(fnid !== 1) {
				tbody.append($('<td>').text(data[key].color));
				tbody.append($('<td>').text(data[key].team));
			}
			tbody.append('</tr>');
		}
		/*** End: Table Body ***/

		tbl.append(thead); // Append header section to table.
		tbl.append(tbody); // Append body section to table.
		
    $("#container").empty().append(tbl);
	}

À première vue, vous penseriez que tout va bien avec le code, mais si vous ouvrez vos outils de développement et inspectez les éléments de la table, vous trouverez les problèmes. Il y a des éléments tr dans thead et tbody qui sont vides. Ces éléments ne devraient pas être là. Quelqu'un peut-il me dire comment ouvrir / fermer l'élément tr dans JQuery et créer la table correctement? Merci.

8 commentaires

Vous devez créer tr et l'ajouter à la tête ou à tbody et td et th append à tr pas à tbody.

Vous n'avez rien à fermer. Ajoutez simplement les éléments. (Vous n'avez pas besoin de créer une chaîne HTML.)

Oui @ChrisG a raison lorsque vous créez $ (''), vous créez un élément DOM comme dans l'inspecteur, vous devez donc ajouter cet élément à tr pas à tbody, vous ne travaillez pas avec une chaîne ici mais les mêmes objets que dans inspecteur.

Votre problème est que vous confondez le HTML avec la création d'éléments DOM. HTML utilise des balises d'ouverture et de fermeture pour désigner le début et l'arrêt d'un élément, car c'est tout ce qu'il a. Mais lorsque vous créez des éléments avec javascript, ce n'est pas un problème. C'est à vous d'ajouter les enfants nécessaires aux éléments.

J'apprécierais vraiment que certains puissent donner un exemple. Je vous remercie.

Aussi comme note d'accompagnement; si vous vous trouvez souvent à faire des choses comme celle-ci, je vous encourage à vous pencher sur l'importation sous une forme ou une autre d'un moteur de création de modèles tel qu'un guidon ou une moustache. L'utilisation de modèles vous permet d'extraire le html de votre javascript, de nettoyer votre logique et de favoriser la séparation des préoccupations.

@Taplar Avez-vous un petit exemple de code que vous pouvez partager? Je vous remercie.

Voici le code, corrigé: jsfiddle.net/khrismuc/t2rq47gk

3 Réponses :

-3
votes

Object.keys (données) .forEach (fonction (élément, clé) {données [élément] .fname});

1 commentaires

1. Avez-vous une description sur la façon de l'utiliser? 2. En quoi est-ce différent des autres réponses?

1
votes

Je suggérerais d'extraire votre code HTML dans un modèle. De cette façon, votre script est nettoyé et vous séparez davantage votre balisage de votre logique. La logique suivante utilise le modèle créé et n'a plus qu'à construire les cellules pour le corps. Il construit les cellules dans un tableau de chaînes en utilisant map, qui ensuite toutes les chaînes sont ajoutées au corps en même temps. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="start" id="start" value="Start" />
<div id="container"></div>

<script type="text/html" id="tableTemplate">
  <table class="display" id="data_tbl">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>DOB</th>
        <th>Status</th>
        <th>Color</th>
        <th>Team</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</script>
.display {
  width: 500px;
  background-color: red;
}
.display,
.display th,
.display td{
  border: 1px solid blue;
}
var data = {
  "1": {
    "fname": "Jon",
    "lname": "Wayne",
    "dob": "05/14/1987",
    "status": "Active",
    "color": "Red",
    "team": "Miami"
  },
  "2": {
    "fname": "Tim",
    "lname": "Ryan",
    "dob": "01/23/1967",
    "status": "Inactive",
    "color": "Blue",
    "team": "Chicago"
  },
  "3": {
    "fname": "Jim",
    "lname": "Carey",
    "dob": "11/02/1997",
    "status": "Suspended",
    "color": "Yellow",
    "team": "Denver"
  },
  "4": {
    "fname": "Chuck",
    "lname": "Norris",
    "dob": "09/06/1945",
    "status": "Active",
    "color": "Green",
    "team": "Boston"
  }
}

$('#start').on('click', showRecords);

function showRecords() {
  displayData(1,data);
}

function displayData(fnid,data) {
  var template = $('#tableTemplate').html();
  var $table = $(template);
  
  $table.find('tbody').append(
    Object.keys(data[fnid]).map(function(key){
      return '<td>'+ data[fnid][key] +'</td>';
    })
  );
	
  $("#container").empty().append($table);
}

3 commentaires

Je comprends que le code serait plus propre si je séparais mon code html. D'autre part, maintenant, React , Vue , etc implémentent Virtual DOM et tout le code HTML est construit en JavaScript. Je pense juste à l'efficacité dans son cas également, même cet exemple n'a que 4 enregistrements.

@espresso_coffee Si vous créez une application à partir de rien, React, Vue, etc. pourraient être des prétendants. Cependant, si vous avez une application existante, il peut être plus intéressant de créer des modèles comme celui-ci ou avec un guidon ou une moustache, plutôt que de tirer dans un cadre entier et de devoir réécrire votre application.

Je suis d'accord. Dans ce cas, je travaille sur une ancienne application. La seule chose que j'utilise est la bibliothèque JQuery. J'essaie toujours d'implémenter un code efficace et facile à entretenir en même temps. Je sais que créer du HTML avec JavaScript n'est pas considéré comme la meilleure pratique dans cet exemple.

2
votes

Utilisez Object.keys a > pour faire une boucle sur votre objet. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="start" id="start" value="Start" />
<div id="container"></div>
.display {
  width: 500px;
  background-color: red;
}
.display,
.display th,
.display td{
  border: 1px solid blue;
}
var data = {
  "1": {
    "fname": "Jon",
    "lname": "Wayne",
    "dob": "05/14/1987",
    "status": "Active",
    "color": "Red",
    "team": "Miami"
  },
  "2": {
    "fname": "Tim",
    "lname": "Ryan",
    "dob": "01/23/1967",
    "status": "Inactive",
    "color": "Blue",
    "team": "Chicago"
  },
  "3": {
    "fname": "Jim",
    "lname": "Carey",
    "dob": "11/02/1997",
    "status": "Suspended",
    "color": "Yellow",
    "team": "Denver"
  },
  "4": {
    "fname": "Chuck",
    "lname": "Norris",
    "dob": "09/06/1945",
    "status": "Active",
    "color": "Green",
    "team": "Boston"
  }
}

$('#start').on('click', showRecords);
function showRecords() {
  displayData(1,data);
}

function displayData() {
  const table = $("<table></table>").addClass('display');

  Object.keys(data).forEach(item => {
    const row = $("<tr></tr>");
    Object.keys(data[item]).forEach(key => {
      const rowData = $("<td></td>")
        .addClass("bar")
        .text(data[item][key]);
      row.append(rowData);
    });
    table.append(row);
  });

  $("#container").empty().append(table);
}

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO