您好我正在使用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();
}
答案 0 :(得分:2)
从
改变 <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!
答案 1 :(得分:1)
如果您不想存在任何行,此方法将从星期一开始计算您的日期,如果您希望稍后手动选择它应该更容易的那一天。
我从包含输入的dom p元素中删除,因为HTML语义不允许这样做,您可能会看到输入宽度与手动添加的宽度不同,但这是css所以我没有打扰并专注于主要问题
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);
}
答案 2 :(得分:0)
你可以尝试使用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);
};