动态添加div

Question

我有一个表，当新用户变得活跃时动态添加行。该函数将添加一个显示用户姓名的新行和一个激活灯箱以显示更多信息的按钮。名称和按钮放在一个单元格中，但我想将按钮右对齐，并将单元格内的名称左对齐。我发现这篇文章 右对齐和左对齐文本在同一个 HTML 表格单元格 中，显示了如何使用 HTML 中的 div 来执行此操作，但我需要动态执行此操作。有人有猜测吗？我尝试了以下代码，它可以工作，但不能证明我想要的名称和按钮。它只是将它们集中在细胞内。我将不胜感激任何帮助。

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

试试这个：

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 2

问题是您需要将用户名和按钮放置在您创建的浮动 div 内，而您已将它们放置在与 div 相同的单元格中，但与 div 处于同一级别。

因此，请尝试将此部分更改

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

为：

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

此外，如果要添加多于 1 行，则 div 将获得“左”和“右”的重复 ID。使用类来代替。

最后，您不需要将 rightDiv 的宽度设置为 50%。如果您想要的话，它应该自动右对齐。

Answer 3

不要单独给出 css 规则，而是直接使用 css 规则集，如下所示：

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

并在 css 中创建如下规则集 div_class ：

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