Добавить div динамически - PullRequest
Новая
       10

Добавить div динамически

0 голосов
/ 24 февраля 2012

У меня есть таблица, которая динамически добавляет строки, когда новые пользователи становятся активными.Функция добавит новую строку, которая отображает имя пользователя и кнопку, которая активирует лайтбокс, чтобы показать больше информации.Имя и кнопка помещаются в одну ячейку, но я бы хотел выровнять кнопку по правому краю, а имя внутри ячейки - по левому краю.Я нашел этот пост Выровнять по правому краю и выровнять по левому краю текст в той же ячейке таблицы HTML , который показывает, как это сделать с помощью div в HTML, но мне нужно сделать это динамически.У кого-нибудь есть предположение?Я попробовал следующий код, он работает, но не оправдывает название и кнопку, как мне бы хотелось.Он просто центрирует их внутри клетки.Буду признателен за любую помощь.

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

Ответы [ 3 ]

2 голосов
/ 24 февраля 2012

Попробуйте это: 

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);
}
1 голос
/ 24 февраля 2012

Проблема в том, что вам нужно поместить имя пользователя и кнопку внутри созданных вами плавающих элементов 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 получит повторяющиеся идентификаторы «left» и «right». Вместо этого используйте класс.

Наконец, вам не нужно устанавливать ширину rightDiv равной 50%. Он должен автоматически выровняться по правому краю, если это то, что вам нужно.

0 голосов
/ 24 февраля 2012

Вместо того, чтобы задавать правила css по отдельности, используйте набор правил css, например, так: 

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

И создайте набор правил div_class следующим образом в вашем css: 

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