Как здесь ответили - div внутри таблицы - недопустимо иметь <div> в качестве дочернего элемента <table>. Я считаю, что <div> вызывает новые строки, но установка display:inline не решает проблему. Что вы должны сделать, это добавить новые элементы <tr> в таблицу.
Я потратил некоторое время на разработку решения JavaScript для этой проблемы, но я также рекомендую изучить библиотеку JavaScript (например, jQuery ), которая запутывает многие из кросс-браузеров и DOM проблемы манипуляции с кодом.
В следующем решении я переписал addRow(), чтобы программно создать новую строку в DOM, и использовал метод appendChild для вставки правильного <tr> в существующий <table>. removeRow() значительно упрощен, чтобы просто удалить последнюю строку таблицы. Я также добавил и исправил кроссплатформенную функцию getElementsByClassName , чтобы расширить документ, если браузер не поддерживает getElementsByClassName . (Кредит для http://code.google.com/p/getelementsbyclassname/ проекта для этого). Наконец, я удалил код обнаружения браузера в пользу условных комментариев , которые поддерживаются только в IE. Это было возможно, так как вам нужно только определить IE <7 при установке <code>style.display = 'table-cell';, поскольку IE <7 не поддерживает <code>table-cell
Вам также следует обратить внимание на написание разметки, которая будет соответствовать выбранному вами DOCTYPE . Неправильная разметка также может привести к непредвиденным проблемам с рендерингом или взаимодействием. Встроенные CSS и JavaScript также следует перенести в файл CSS и JS, что позволит браузерам легче кэшировать эти ресурсы.
Полное решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EmmeElle Indagini Geologiche contatti, richiesta informazioni, preventivi</title>
<style type="text/css">
.campiPreventivo {
display:none;
}
</style>
<script type="text/javascript">
var oldIE = false;
if (typeof document.getElementsByClassName!='function') {
document.getElementsByClassName = function (className, tag, elm){
if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};
}
var counter = 0;
function addRow() {
var table = document.getElementById('dataTable');
var tbody = table.getElementsByTagName('tbody')[0];
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.setAttribute('width', '80');
td1.setAttribute('align', 'center');
var td2 = document.createElement('td');
td2.setAttribute('width', '215');
var td3 = document.createElement('td');
td3.setAttribute('width', '70');
td3.setAttribute('align', 'center');
td1.innerHTML = '<input type="checkbox" name="chk_cancella' + counter + '"/>';
td2.innerHTML = '<input type="text" name="indagine' + counter + '" size="34"/>';
td3.innerHTML = '<input type="text" name="qta' + counter + '" value="1" size="1" maxlength="2" onKeyPress="return numbersonly(this, event)"/>';
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tbody.appendChild(tr);
counter++;
}
function deleteRow() {
if (counter === 1) {
alert("Non è possibile eliminare tutte le indagini nella richiesta di preventivo. Se non si vogliono specificare indagini, scegliere INFORMAZIONI nel campo TIPO RICHIESTA");
return;
}
try {
var table = document.getElementById('dataTable');
var tbody = table.getElementsByTagName('tbody')[0];
var rows = table.getElementsByTagName('tr');
tbody.removeChild(rows[rows.length-1]);
counter--;
} catch(e) {}
}
function changeRows(obj) {
var list = document.getElementsByClassName('campiPreventivo');
if(obj.value == 'preventivo') {
if(counter === 0) {
addRow();
}
for (var i = 0; i < list.length; i++) {
var displayType = oldIE ? 'block' : 'table-cell';
if (list[i].nodeName === 'TD') {
list[i].style.display = displayType;
}
}
} else {
for (var k = 0; k < list.length; k++) {
list[k].style.display = 'none';
}
try {
var removeHere = document.getElementById('dataTable');
for (var z= 0; z<removeHere.parentNode.childNodes.length; z++) {
if(removeHere.parentNode.childNodes[z].nodeName=='DIV')
{
}
}
counter=0;
} catch (e) {}
}
}
</script>
<!--[if lte IE 7]>
<script type="text/javascript">
oldIE = true;
</script>
<![endif]-->
</head>
<body>
<div id=formDiv>
<form name="contactForm" action="php/mail.php" onsubmit="return validateForm()" method="post">
<table width="668" border="0" cellpadding="0" cellspacing="0" id="formTable">
<tr>
<td width="303">Tipo Richiesta</td>
<td id="requestType" colspan="4">
<select name="tipo_richiesta" onChange="changeRows(this)">
<option selected value="info">Informazioni</option>
<option value="preventivo">Preventivo</option>
</select>
</td>
</tr>
<tr>
<td class="campiPreventivo">Intervento</td>
<td class="campiPreventivo" colspan="4"> <input type="text" name="intervento" size="50"></td>
</tr>
<tr>
<td class="campiPreventivo">Ubicazione*</td>
<td class="campiPreventivo" colspan="4"><input type="text" name="ubicazione" size="50"></td>
</tr>
<tr>
<td style="padding-top:20px" valign="top" class="campiPreventivo" rowspan="2">
<input type="button" value="+ Aggiungi Indagine" onclick="addRow()"><br>
<input type="button" value="- Cancella Indagine" onclick="deleteRow()">
</td>
<td style="padding-top:20px" class="campiPreventivo" width="80" align="center">Cancella</td>
<td style="padding-top:20px" class="campiPreventivo" width="215">Indagine*</td>
<td class="campiPreventivo" style="padding-top:20px" width="70" align="center">Quantità</td>
</tr>
<tr>
<td colspan="4">
<table id="dataTable" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td></td><td></td><td></td><td></td></tr></tbody></table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>