按钮添加动态div

Question

您好我正在使用div制作表格。我想使用按钮追加每个div。例如，我有一个sunday div，在其中我希望将每行添加到。这里看起来像http://jsfiddle.net/vFEd5/1/。我的按钮add row已停用，因为我不知道该怎么做。因此，当我点击add row时，我需要在sunday中附加项目和 lieu 。我该怎么做？

我的代码：

<div class="Table">
    <div class="Title">
        <p>Feuille de temps</p>
    </div>
    <div class="Heading">
        <div class="Cell">
            <p>Jour de la semaine</p>
        </div>
        <div class="Cell">
            <p>projet</p>
        </div>
        <div class="Cell">
            <p>lieu</p>
        </div>
    </div>
    <div class="Row">
        <div class="jour">
            <p>dimanche</p>
        </div>
        <div class="Cell">
                   <p>  <input type="text" name="projet1" size="10" id ="projet2" class "lieu"></p>
        </div>
        <div class="Cell">
            <p> <input type="text" name="prolieu1" size="10" id ="lieu1" class "lieu"></p>
        </div>
    </div>
    <div class="Row">
        <div class="jour" >
            <p>lundi</p>
        </div>

        <div class="Cell">
             <p>    <input type="text" name="projet3" size="10" id ="projet3" class "lieu"></p>
        </div>
        <div class="Cell">
            <p> <input type="text" name="prolieu2" size="10" id ="lieu2" class "lieu"></p>
        </div>
    </div>
</div>

     <input type="button" onclick="addRows();" value="Add Row" />






<style type="text/css">
    .Table
    {
        display: table;
    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
        border: solid;
        border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
    }
        .jour
    {

        display: table-row;
        font-weight: bold;
        text-align: center;
    }
</style>

我的自动填充代码，我稍后会添加

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});


});

    //------------------AUTO COMPLETE NUMÉRO DE PROJET----------------------    
                $(document).ready(function(){
            //-------AUTO COMPLETE addrow PROJET-----
                    $("#name").autocomplete({
                        source:'name[].php',
                        minLength:1
                    });
    //------------------COMPLETE addrow DESC DIMANCHE----------------------
                function handleEnter(e, obj, field){

                    if (e.keyCode == 13 || e.which == 13){
                        if (window.XMLHttpRequest)
                          {// code for IE7+, Firefox, Chrome, Opera, Safari
                            xmlhttp=new XMLHttpRequest();
                          }
                        else
                          {// code for IE6, IE5
                            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                          }
                        xmlhttp.onreadystatechange=function()
                          {
                            if (xmlhttp.readyState==4 && xmlhttp.status==200)
                                {
                                    tempArrayInJS = JSON.parse(xmlhttp.responseText); 
                                    $("#client1[]").val( tempArrayInJS[0]['cliName']);

                                }
                          }
                        xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
                        xmlhttp.send();

                    }

Answer 1

从

改变

  <div class="Row">
    <div class="jour">
        <p>dimanche</p>
    </div>
    <div class="Cell">

    </div>
    <div class="Cell">

    </div>
</div>

到

   <div class="Row">
    <div class="jour">
        <p>dimanche</p>
    </div>
    <div class="Cell" id="dimancheProject">

    </div>
    <div class="Cell" id="dimancheLieu">

    </div>
</div>

然后在你的JS文件中尝试这个：

    var i=0;
function addRow(){
    var dimancheProject = document.getElementById("dimancheProject");
    var dimancheLieu = document.getElementById("dimancheLieu");

    var projectParagraph = document.createElement('p');
    var lieuParagraph = document.createElement('p');
    var inputLieu = document.createElement('input');
    var inputProject = document.createElement('input');
    inputProject.type = 'text';
    inputProject.class="lieu";
    inputProject.size="10";
    inputProject.id='project'+i;
    inputProject.name='project'+i;

    inputLieu.type = 'text';
    inputLieu.class="lieu";
    inputLieu.size="10";
    inputLieu.id='lieu'+i;
    inputLieu.name='lieu'+i;

    projectParagraph.appendChild(inputProject);
    lieuParagraph.appendChild(inputLieu);

    dimancheProject.appendChild(projectParagraph);
    dimancheLieu.appendChild(lieuParagraph);
    i++;
}

注意：添加元素时不要忘记调整表格CSS！

Answer 2

如果您不想存在任何行，此方法将从星期一开始计算您的日期，如果您希望稍后手动选择它应该更容易的那一天。

我从包含输入的dom p元素中删除，因为HTML语义不允许这样做，您可能会看到输入宽度与手动添加的宽度不同，但这是css所以我没有打扰并专注于主要问题

Demo here

function addRows() {
    'use strict';
    var table = document.getElementById('calendarTable'),
        row = document.createElement('div'),
        cell = row.cloneNode(false),
        day = row.cloneNode(false),
        p = document.createElement('p'),
        input = document.createElement('input'),
        rows =  table.querySelectorAll('.Row'),
        rowCount = rows.length,
        days = ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'],
        newDayIndex = 0; // lundi by default

    // build jour cell
    day.className = 'jour';

    // calculate next day
    if (rowCount) {
        newDayIndex = (days.indexOf(rows[rowCount-1].querySelector('.jour p').innerHTML) + 1) % days.length;
    }

    p.innerHTML = days[newDayIndex];
    day.appendChild(p);
    row.appendChild(day);

    // build projet and lieu cells
    cell.className = 'Cell';
    input.setAttribute('type', 'text');
    input.setAttribute('name', 'projet_' + rowCount);
    input.setAttribute('id', 'projet_' + rowCount);
    input.className = 'projet';
    cell.appendChild(input);
    row.appendChild(cell);

    cell = cell.cloneNode(false);
    cell.className = 'Cell';
    input = input.cloneNode(false);
    input.setAttribute('type', 'text');
    input.setAttribute('name', 'lieu_' + rowCount);
    input.setAttribute('id', 'lieu_' + rowCount);
    input.className = 'lieu';
    cell.appendChild(input);
    row.appendChild(cell);

    // then row
    row.className = 'Row';

    table.appendChild(row);

}

Answer 3

你可以尝试使用jQuery进行这种DOM操作：Fiddle

var week = ["dimanche", "lundi", "vendredi", "mardi", "mercredi", "jeudi", "samedi"];

addRows = function () {
    var numberOfDays = $(".Row").length;
    console.log(numberOfDays);
    var row = $('<div class="Row"></div>');
    var cell1 = $('<div class="Cell"></div>');
    var cell2 = $('<div class="Cell"></div>');
    row = row.append('<div class="jour"><p>' + week[numberOfDays % 7] + '</p></div>');
    row = row.append(cell1.append('<p><input type="text" name="projet' + (numberOfDays + 1) + '" size="10" id="projet' + (numberOfDays + 1) + '" class="lieu" /></p>'));
    row = row.append(cell2.append('<p><input type="text" name="prolieu' + (numberOfDays) + '" size="10" id="lieu"' + (numberOfDays) + '" class="lieu" /></p>'));
    $('.Table').append(row);
};