web-dev-qa-db-fra.com

Comment créer un tableau HTML à l'aide de jQuery de manière dynamique?

J'essaie de créer dynamiquement une table HTML semblable à celle-ci à l'aide de jQuery: 

<table id='providersFormElementsTable'>
    <tr>
        <td>Nickname</td>
        <td><input type="text" id="nickname" name="nickname"></td>
    </tr>
    <tr>
        <td>CA Number</td>
        <td><input type="text" id="account" name="account"></td>
    </tr>
</table>

Ceci est mon tableau actuel: 

<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>

C'est la méthode qui va créer les éléments tr et td en prenant id et labelText: 

function createFormElement(id, labelText) {
    // create a new textInputBox button using supplied parameters
    var textInputBox = $('<input />').attr({
        type: "text", id: id, name: id
    });
    // create a new textInputBox using supplied parameters
    var inputTypeLable = $('<label />').append(textInputBox).append(labelText);

    // append the new radio button and label
    $('#providersFormElementsTable').append(inputTypeLable).append('<br />');
}

J'ai aussi une valeur qui sera affichée comme info-bulle.

Aidez-moi à créer une table de manière dynamique avec tool tip and tr td.

MODIFIER:

J'ai presque fini avec le code suivant: 

function createProviderFormFields(id, labelText,tooltip,regex) {
    var tr = '<tr>' ;
    // create a new textInputBox  
    var textInputBox = $('<input />').attr({
        type: "text",
        id: id, name: id,
        title: tooltip
    });  

    // create a new Label Text
    tr += '<td>' + labelText  + '</td>';
    tr += '<td>' + textInputBox + '</td>';  
    tr +='</tr>';
    return tr;
}

Ici l'étiquette vient correctement et la zone de saisie ne vient pas et affiche [object Object] où la zone de texte doit venir ...

Lorsque j’ai imprimé la textInputBox en utilisant console.log, j’obtiens ce qui suit:

[input#nickname, constructor: function, init: function, selector: "", jquery: "1.7.2", size: function…]

Quel pourrait être le problème?

Merci à @theghostofc qui m'a montré le chemin ... :)

javascriptjqueryhtml-table
26
Java Questions

Vous pouvez utiliser deux options:

  1. createElement
  2. InnerHTML

Créer un élément est le moyen le plus rapide (vérifier ici .):

$(document.createElement('table'));

InnerHTML est une autre approche populaire:

$("#foo").append("<div>hello world</div>"); // Check similar for table too.

Vérifiez un exemple réel sur Comment créer une nouvelle table avec des lignes à l'aide de jQuery et l'envelopper dans div .

Il peut aussi y avoir d'autres approches. Veuillez utiliser ceci comme point de départ et non comme solution de copier-coller.

Modifier:

Check Création dynamique de table avec DOM

Edit 2:

IMHO, vous mélangez objet et HTML interne. Essayons avec une approche html interne pure:

function createProviderFormFields(id, labelText, tooltip, regex) {
    var tr = '<tr>' ;
         // create a new textInputBox  
           var textInputBox = '<input type="text" id="' + id + '" name="' + id + '" title="' + tooltip + '" />';  
        // create a new Label Text
            tr += '<td>' + labelText  + '</td>';
            tr += '<td>' + textInputBox + '</td>';  
    tr +='</tr>';
    return tr;
}
16
Vivek Jain

Un exemple avec un peu moins html stringifié:

var container = $('#my-container'),
  table = $('<table>');

users.forEach(function(user) {
  var tr = $('<tr>');
  ['ID', 'Name', 'Address'].forEach(function(attr) {
    tr.append('<td>' + user[attr] + '</td>');
  });
  table.append(tr);
});

container.append(table);
6
Luke W

Voici un exemple complet de ce que vous recherchez:

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $( document ).ready(function() {
            $("#providersFormElementsTable").html("<tr><td>Nickname</td><td><input type='text' id='nickname' name='nickname'></td></tr><tr><td>CA Number</td><td><input type='text' id='account' name='account'></td></tr>");
        });
    </script>
</head>

<body>
    <table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>
</body>

2
Fabricio

Je comprends que vous souhaitiez créer des éléments de manière dynamique. Cela ne signifie pas que vous devez réellement construire des éléments DOM pour le faire. Vous pouvez simplement utiliser html pour réaliser ce que vous voulez.

Regardez le code ci-dessous:

HTML:

<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'></table>

JS:

createFormElement("Nickname","nickname")

function createFormElement(labelText, id) {

$("#providersFormElementsTable").html("<tr><td>Nickname</td><td><input type='text' id='"+id+"' name='nickname'></td><lable id='"+labelText+"'></lable></td></tr>");
$('#providersFormElementsTable').append('<br />');
}

Celui-ci fait ce que vous voulez de manière dynamique, il lui suffit d’identifier id et labelText pour le faire fonctionner, qui doit en fait être la seule variable dynamique, car elles seront les seules à changer. Votre structure DOM restera toujours la même.

DEMO DE TRAVAIL:

De plus, lorsque vous utilisez le processus que vous avez mentionné dans votre message, vous obtenez uniquement [object Object]. En effet, lorsque vous appelez createProviderFormFields, il s’agit d’un appel de fonction qui renvoie donc un objet pour vous. Vous ne verrez pas la zone de texte car elle doit être ajoutée. Pour cela, vous devez effacer le contenu individuel de la object, puis en construire le code HTML. 

Il est beaucoup plus facile de ne construire que le code HTML et de modifier la valeur id de l'étiquette et de la saisir en fonction de vos besoins.

2
The Dark Knight

PAR EXEMPLE, VOUS AVEZ REÇU DES DONNÉES JASON DU SERVEUR. 

                var obj = JSON.parse(msg);
                var tableString ="<table id='tbla'>";
                tableString +="<th><td>Name<td>City<td>Birthday</th>";


                for (var i=0; i<obj.length; i++){
                    //alert(obj[i].name);
                    tableString +=gg_stringformat("<tr><td>{0}<td>{1}<td>{2}</tr>",obj[i].name, obj[i].age, obj[i].birthday);
                }
                tableString +="</table>";
                alert(tableString);
                $('#divb').html(tableString);

ICI IS LE CODE DE gg_stringformat

function gg_stringformat() {
var argcount = arguments.length,
    string,
    i;

if (!argcount) {
    return "";
}
if (argcount === 1) {
    return arguments[0];
}
string = arguments[0];
for (i = 1; i < argcount; i++) {
    string = string.replace(new RegExp('\\{' + (i - 1) + '}', 'gi'), arguments[i]);
}
return string;

}

0
GGSoft