Ajouter div Dynamiquement

J'ai une table qui ajoute des lignes de manière dynamique en tant que nouveaux utilisateurs de devenir active. La fonction permet d'ajouter une nouvelle ligne qui affiche le nom de l'utilisateur et un bouton qui active une lightbox pour afficher plus d'informations. Le nom et le bouton sont mis dans une cellule, mais j'aimerais aligner à droite le bouton de gauche et aligner le nom à l'intérieur de la cellule. J'ai trouvé ce post Aligner à droite et à gauche aligner le texte dans les mêmes HTML cellule de tableau qui montre comment le faire avec les divisions en HTML, mais j'ai besoin de le faire dynamiquement. Quelqu'un a une supposition? J'ai essayé le code suivant, cela fonctionne, mais cela ne justifie pas le nom et le bouton de la façon dont je le voudrais. Il vient de centres de l'intérieur de la cellule. J'apprécierais toute aide. 

function addRow(tableID, user, phone, age, city, zipCode) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
tabbody=document.getElementsByTagName("tbody").item(2);
cell1 = document.createElement("TD"); //Create New Row
leftDiv = document.createElement("div"); //Create left div
leftDiv.id = "left"; //Assign div id
leftDiv.setAttribute("style", "float:left;width:50%;"); //Set div attributes
rightDiv = document.createElement("div"); //Create right div
rightDiv.id = "right"; //Assign div id
rightDiv.setAttribute("style", "float:right;width:50%;"); //Set div attributes
user_name = document.createTextNode(user + ' '); //Set user name
details_btn = document.createElement("button"); //Create details button
btn_txt = document.createTextNode("Details"); //Create button text
details_btn.appendChild(btn_txt);  //Add "Details" to button text
details_btn.onclick = function(){moreInfo(user, phone, age, city, zipCode);}; //Assign button function
cell1.appendChild(leftDiv);
cell1.appendChild(user_name); //Add name to row
cell1.appendChild(rightDiv);
cell1.appendChild(details_btn); //Add button to row
row.appendChild(cell1); //Add row to table
tabbody.appendChild(row);
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
InformationsquelleAutor mkyong | 2012-02-24
  1. 1

    Le problème, c'est que vous avez besoin de placer le nom d'utilisateur et le bouton à l'intérieur de les divs flottantes que vous avez créé, alors que vous avez placé dans la même cellule que le div, mais au même niveau que les divs.

    Donc, essayez de modifier cet article:

     cell1.appendChild(leftDiv);
cell1.appendChild(user_name); //Add name to row
cell1.appendChild(rightDiv);
cell1.appendChild(details_btn); //Add button to row
row.appendChild(cell1); //Add row to table
tabbody.appendChild(row);

    à ceci:

     leftDiv.appendChild(user_name); //Add name to left div
rightDiv.appendChild(details_btn); //Add button to right div
cell1.appendChild(leftDiv);
cell1.appendChild(rightDiv);
row.appendChild(cell1); //Add row to table
tabbody.appendChild(row);

    En outre, si plus de 1 ligne va être ajoutée, les divs permettra d'obtenir un double des Id de "gauche" et "droite". Utiliser une classe à la place.

    Enfin, vous ne devriez pas avoir besoin de régler la largeur de la rightDiv à 50%. Il devrait automatiquement aligner à droite elle-même, si c'est ce que vous êtes après.

    InformationsquelleAutor GregL
  2. 2

    Essayez ceci:

    function creatediv() {
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.style.width = 300;
newdiv.style.height = 300;
newdiv.style.position = "absolute";
newdiv.style.background = "#C0C0C0";
newdiv.innerHTML = "Dynamic Div";
document.body.appendChild(newdiv);
}
    InformationsquelleAutor Vinod
  3. 0

    Au lieu de donner des règles css individuellement, utilisez la règle css directement comme ceci :

    div.className = "div_class_right/left";  //for creating right/left div respectively.

    Et de créer ensemble de règles div_class comme ceci dans votre css :

    .div_class_right/left{
float : right/left;
width : 50%;
}
    • C'est le meilleur moyen. Il ne manquait qu'une seule règle: text-align: right/left. float lui-même ne pas aligner le texte dans DIV.
    • merci pour la correction,Vous avez peut-être droit, mais l'affiche à aligner DIV lui-même à son parent TD et non le texte-align de la balise div.
    • Était-il? "Je tiens à vous aligner à droite le bouton de gauche et alignez le nom de..." me semble, qu'il veut placer le bouton sur le côté droit de la cellule et le nom sur le côté gauche de la même cellule. Les DIVs ne sont nécessaires pour atteindre cet objectif.
    InformationsquelleAutor Ved