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 ... :)
Vous pouvez utiliser deux options:
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.
Check Création dynamique de table avec DOM
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;
}
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);
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>
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.
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.
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;
}