Ajouter dynam dynamiquement

Question

J'ai une table qui ajoute dynamiquement des lignes lorsque de nouveaux utilisateurs deviennent actifs. La fonction ajoutera une nouvelle ligne qui affiche le nom de l'utilisateur et un bouton qui active une visionneuse pour afficher plus d'informations. Le nom et le bouton sont placés dans une seule cellule, mais je voudrais aligner le bouton à droite et aligner le nom à gauche dans la cellule. J'ai trouvé cet article Right align and left align text in same HTML table cell qui montre comment le faire avec des divs en HTML, mais j'ai besoin de le faire dynamiquement. Quelqu'un a une idée? J'ai essayé le code suivant, cela fonctionne, mais ne justifie pas le nom et le bouton que je voudrais. Il les centre simplement dans 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; 
    } 
} 

Answer 1

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

Alors essayez de changer cette section:

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); 

De plus, si plus de 1 ligne va être ajoutée, les divs auront ID en double de "gauche" et "juste". Utilisez une classe à la place.

Enfin, vous ne devriez pas avoir besoin de définir la largeur de rightDiv à 50%. Il devrait automatiquement s'aligner à droite, si c'est ce que vous recherchez.

Answer 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); 
} 

Answer 3

Au lieu de donner des règles css individuellement, règle l'utilisation de css définie directement comme ceci:

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

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

.div_class_right/left{ 
    float : right/left; 
    width : 50%; 
}