Javascript Girl
  1. Javascript Girl
  3. Comment ajouter de façon dynamique une nouvelle colonne à une table HTML
Intereting Posts
Existe-t-il une manière native de traiter un objet non-rectangle sur toile dans js? Chargement du fichier JSON local Asp.Net Mvc Url.Action dans le fichier js externe? Comment utiliser onBlur sur Angular2? Comment puis-je trouver l'élément actuel sur mouseover en utilisant jquery Télécharger un fichier avec un appel ajax Déterminez si une fonction JavaScript est une fonction liée Quel est le bon moyen de gérer les connexions de mangous avec express.js? D3.js geoJSON et limites Arrêtez de recharger le fichier flash lors de l'utilisation des méthodes d'affichage et de masquage Obtenez le code source complet de la page via la requête ajax via javascript Dans node-supervisor, comment je regarde tout dans un répertoire pour les changements? KnockoutJS / Bootstrap – Effacement du formulaire modal lors de la fermeture de modal en utilisant javascript Combinez les fonctions de navigation horizontale et de clic (jQuery)? Mettez en surbrillance <TR> journal de la semaine entière

Comment ajouter de façon dynamique une nouvelle colonne à une table HTML

J'ai une table sur laquelle je suis en train d'ajouter des lignes dynamiquement: http://jsfiddle.net/fmuW6/5/

Maintenant, j'aimerais ajouter une nouvelle colonne à la table avec un clic d'un bouton. L'utilisateur saisira l'en-tête de colonne dans une zone de texte.

Comment puis-je atteindre cet objectif? Si l'utilisateur ajoute 4 lignes, le bouton Add a new Column devrait prendre soin de toutes les lignes existantes (ajouter une case à cocher dans chacune d'elles).

mettre à jour

Je cherche à ajouter le nom de la colonne et la case à cocher au niveau de la ligne.

J'ai donc ajouté la zone de texte dans laquelle l'utilisateur saisira le nom de la colonne: http://jsfiddle.net/fmuW6/10/ 

 <input type=text placeholder='columnname'/> <button type="button" id="btnAddCol">Add new column</button></br></br>

Alors, lorsque l'utilisateur clique sur le bouton, le nom de la colonne devrait être la valeur dans la zone de texte et au niveau de la ligne devrait être les cases à cocher. Donc, fondamentalement, la nouvelle colonne devrait être ajoutée à tous les tr dans le tableau, à l'exception de la première ligne puisque ce sont les noms des colonnes

J'ai mis à jour votre violon avec un petit exemple comment vous pourriez le faire.

JsFiddle – Lien 

 var myform = $('#myform'), iter = 0; $('#btnAddCol').click(function () { myform.find('tr').each(function(){ var trow = $(this); if(trow.index() === 0){ trow.append('<td>Col+'iter+'</td>'); }else{ trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>'); } }); iter += 1; });

Cela ajouterait une nouvelle colonne à chaque ligne, y compris une variable de compte qui est appliquée à la première ligne comme nom et au nom-attribut des cases sur les lignes suivantes.

Envisager d'utiliser th -elements pour l'en-tête de la table, de cette façon, vous n'auriez pas besoin de l'index-check que je fais et il serait plus sémantiquement correct.

J'ai laissé de côté la partie où l'utilisateur mettrait un nom pour la colonne, mais comme vous le voyez, vous pouvez simplement remplacer la valeur iter par celle-ci à la fin.

La réponse fonctionne, mais voici encore une façon alternative d'utiliser thead et tbody!

http://jsfiddle.net/afzaalace/QNP3r/ 

 JS $('#irow').click(function(){ if($('#row').val()){ $('#mtable tbody').append($("#mtable tbody tr:last").clone()); $('#mtable tbody tr:last :checkbox').attr('checked',false); $('#mtable tbody tr:last td:first').html($('#row').val()); } }); $('#icol').click(function(){ if($('#col').val()){ $('#mtable tr').append($("<td>")); $('#mtable thead tr>td:last').html($('#col').val()); $('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="checkbox">'))}); } });

Utilisez ce code pour ajouter une nouvelle colonne: 

 $('#btnAddCol').click(function () { $("tr").append("<td>New Column</td>"); });

Mais vous devez modifier la valeur de la première ligne avec un texte et d'autres pour inclure un <input type="checkbox" /> . Et il vaut mieux

Vérifiez jsFiddle ……………………….. http://jsfiddle.net/fmuW6/8/ 

  $(document).ready(function () { $('#btnAdd').click(function () { var count = 3, first_row = $('#Row2'); while(count-- > 0) first_row.clone().appendTo('#blacklistgrid'); }); $('#btnAddCol').click(function () { $("#blacklistgrid tr").each(function(){ $(this).append("<td>test</td>"); }) }); });