我写了一个JS脚本来动态地在表上添加行。在选择元素更改时，此脚本将读取HTML div设置为display：none并使用CloneNode（True）方法克隆此模板。然后，它在占位符跨度之前添加此新对象。
以下是我的代码HTML + Javascript：
<script type="text/javascript" src="./js/getElementsByClassName-1.0.1.js"></script>
<script language="JavaScript" type="text/javascript">
var browser = '';
function checkBrowser() {
var version = '';
var entrance = '';
var cond = '';
// BROWSER?
if (browser == ''){
if (navigator.appName.indexOf('Microsoft') != -1)
browser = 'IE'
else if (navigator.appName.indexOf('Netscape') != -1)
browser = 'Netscape'
else browser = 'IE';
}
if (version == ''){
version= navigator.appVersion;
paren = version.indexOf('(');
whole_version = navigator.appVersion.substring(0,paren-1);
version = parseInt(whole_version);
}
//if (browser == 'IE' && version >= 4) document.write('<'+'link rel="stylesheet" href="ie.css" />');
//if (browser == 'Netscape' && version >= 2.02) document.write('<'+'link rel="stylesheet" href="nn.css" />');
return browser;
}
var counter = 0;
function addRow() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
//alert(newFields.innerHTML);
//newFields.style.display = 'block';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function deleteRow() {
try {
var element;
var removeHere=document.getElementById('writeroot');
var oldCounter=counter;
for (var i= 0; i<removeHere.parentNode.childNodes.length && counter>1; i++) {
if(removeHere.parentNode.childNodes[i].nodeName=='DIV')
{
for(var k=0;k< removeHere.parentNode.childNodes[i].childNodes.length;k++)
{
element=removeHere.parentNode.childNodes[i].childNodes[k];
if(element.checked)
{
removeHere.parentNode.removeChild(removeHere.parentNode.childNodes[i]);
counter--;
i--;
break;
}
}
}
}
removeHere.parentNode.childNodes.length-=(oldCounter-counter);
/*
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");
} */
}catch(e) {
//alert(e);
}
}
function changeRows(obj)
{
if(obj.value=="preventivo")
{
if(counter==0)
addRow();
if(checkBrowser()=='IE'){
//caso IE
try{
list=getElementsByClassName("campiPreventivo");
for (var i = 0; i < list.length; i++)
{
if(list[i].nodeName=='DIV') {
list[i].style.display="block";
}
else {
list[i].style.display="table-cell";
}
}
}
catch(err) {
//alert(err);
}
}
else {
var list = document.getElementsByClassName("campiPreventivo");
for (var i = 0; i < list.length; i++)
{
if(list[i].nodeName=='DIV') {
list[i].style.display="block";
}
else {
list[i].style.display="table-cell";
}
}
}
}
else {
if(checkBrowser()=='IE'){
//caso IE
try{
list=getElementsByClassName("campiPreventivo");
for (var j = 0; j < list.length; j++)
{
list[j].style.display="none";
}
}
catch(err) {
//alert(err);
}
}
else {
var list = document.getElementsByClassName("campiPreventivo");
for (var k = 0; k < list.length; k++)
{
list[k].style.display="none";
}
}
try {
var removeHere=document.getElementById('writeroot');
//var oldCounter=counter
for (var z= 0; z<removeHere.parentNode.childNodes.length; z++) {
if(removeHere.parentNode.childNodes[z].nodeName=='DIV')
{
}
}
counter=0;
}catch(e) {
//alert(e);
}
}
}
</script>
</head>
<body>
<div id="main">
<div id="content">
<div class="contentTxtStyle"><font style="font-size:24px; text-decoration:underline; padding-left:30px ">Contatti</font><br><br>
<img class="contattiContentImg" alt="Chiedere descrizione" src="img/logo.png">
<div id="qrDescription">Aggiungi EmmeElle ai contatti con il codice QR.</div>
<div id="appLinkDesc">Non hai una app per i QR code? Ottienila gratuitamente dal tuo market.</div>
<a href="http://qr.ai/uq"><img class="marketLogo1" alt="QR Droid su Android Market" src="img/android market.jpg"></a>
<a href="http://itunes.apple.com/app/i-nigma-4-qr-datamatrix-barcode/id388923203?mt=8"><img class="marketLogo2" alt="I-nigma su APPSTORE" src="img/appstore.jpg"></a>
<a href="http://appworld.blackberry.com/webstore/content/27049?lang=en"><img class="marketLogo3" alt="I-nigma su BlackBerry App World" src="img/BB-App-World-Logo.jpg"></a>
<a href="http://windowsphone.com/s?appid=828c4e78-1d2b-4fd2-ad22-fde9c553e263"><img class="marketLogo4" alt="I-nigma per Windows Phone" src="img/Windows-Phon01.png"></a>
<b> <font style="font-size:115%"> EmmeElle </font> <br>
di Matteo Mantovanelli e Lorenzo Cinti</b>
<br><br>
Via I Maggio, 15 - 50022 - Greve in Chianti (Fi)
<br><br>
<i>Email:</i><br>
<a href="mailto:lorenzo@geoemmelle.it">lorenzo@geoemmelle.it</a><br>
<a href="mailto:matteo@geoemmelle.it">matteo@geoemmelle.it</a><br>
<br>
<i>Tel:</i><br>
<table border="0">
<tr>
<td>Dott. Geol. Lorenzo Cinti</td>
<td width="150" align="right">+39 328 4896574</td>
</tr>
<tr>
<td>Dott. Geol. Matteo Mantovanelli</td>
<td width="150" align="right">+39 328 2824617</td>
</tr>
</table>
<img class="contattiQRCode" alt="Contatto in QR Code" src="img/contattoQR.png"> <br>
<i>Web:</i><br>
<a href="http://www.geoemmelle.it">WWW.GEOEMMELLE.IT</a>
<br><br><br><br>
Per qualsiasi domanda o per richiedere un preventivo potete contattarci ad uno dei recapiti sopra elencati oppure compilare il modulo sottostante.
<br><br>
<h2>Richiesta informazioni e preventivi</h2>
<div id="readroot" style="display: none">
<TR>
<TD width="80" align="center"><INPUT type="checkbox" name="chk_cancella"></TD>
<TD width="215"><INPUT type="text" name="indagine" size="34"></TD>
<TD width="70" align="center"><input type="text" name="qta" value="1" size="1" maxlength="2" onKeyPress="return numbersonly(this, event)"></TD>
</TR>
</div>
<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)" autocomplete="off">
<option selected value="info">Informazioni</option>
<option value="preventivo">Preventivo</option>
</select>
</td>
</tr>
<tr>
<td>Azienda/Referente*</td><td colspan="4"> <input type="text" name="referente" size="50"></td>
</tr>
<tr>
<td>Email*</td><td colspan="4"><input id="emailAddr" type="text" name="email" size="50"></td>
</tr>
<tr>
<td>Telefono</td><td colspan="4"> <input type="text" name="telefono" size="50" onKeyPress="return numbersonly(this, event)"></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">
<span id="writeroot"></span>
</TABLE>
</td>
</tr>
<tr>
<td style="padding-top:20px" valign="top">Dettagli/Note</td><td style="padding-top:20px" colspan="4"><textarea name="dettagli" cols="47" rows="10" style="resize:none" wrap="hard"></textarea></td>
</tr>
<tr>
<td style="padding-top:20px; font-size:12px" colspan="4" align="center"><input type="checkbox" name="privacy">Autorizzo il trattamento dei dati personali secondo la vigente normativa sulla privacy: D.lgs 196/03</td>
</tr>
<tr>
<td style="padding-top:20px" colspan="4" align="center"><input type="submit" value="Invia richiesta"></td>
</tr>
</table>
</form>
<br>
<font style="font-size:85%">I campi contrassegnati con * sono obbligatori</font>
</div>
</div>
</div>
<div id="copirightBox">
<div id="copyrightTxt">Copyright © Tutti i diritti riservati</div>
</div>
<div id="corpInfoTxt">
<p id="ciTxtStyle">EmmeElle - Indagini Geologiche - P.Iva: 06160480486</p>
</div>
现在，我的问题是当我在IE浏览器上运行此脚本（我检查的每个版本）时，它会在每个TD元素后面添加一行新行。这不是我想要的，这不是我在Chrome，Firefox，Safari等上的行为......
您可以使用除IE之外的所有内容浏览http://www.geoemmelle.it/contatti.html，然后在第一个字段中选择“Preventivo”以启动脚本。然后，对IE执行相同操作并检查差异。
我真的不知道如何处理这个问题。有没有人知道这个问题？
提前感谢您的帮助！
修改
似乎在我添加的DIV中TR元素的每个TD元素之后附加了“新行”。 请帮忙弄清楚如何找到解决方案？
再次感谢。
答案 0 :(得分：1)
在此处回答 - div inside table - 将<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中支持的conditional comments。这是可能的，因为您只需要检测IE＆lt;在设置style.display = 'table-cell';时，因为IE＆lt; 7不支持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>
答案 1 :(得分：1)
虽然我已经回答了JavaScript解决方案，但这里有一个使用jQuery JavaScript库的版本，我希望你能看到的代码少得多，尽管有（小）开销包括jQuery库。
使用jQuery函数绑定单击和更改事件，而不是旧的 onclick 和 onchange 事件。它不是一个完整的解决方案，因为当下拉列表被更改时，动态行不会被隐藏。让我们说我把它留作学习练习： - ）
<!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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var template = $('<tr><td style="width:80px;text-align:center;"><input type="checkbox" name="chk_cancella"/></td><td style="width:215px"><input type="text" name="indagine" size="34"/></td><td style="width:70px;text-align:center;"><input type="text" name="qta" value="1" size="1" maxlength="2" onKeyPress="return numbersonly(this, event)"/></td></tr>');
$('#addRow').on('click', function() {
var counter = $('#dataTable tr').length;
var newRow = template.clone();
newRow.find('input').each(function() {
var $this = $(this);
$this.prop('name', $this.prop('name') + counter);
});
$('#dataTable').append(newRow);
});
$('#removeRow').on('click', function() {
if ($('#dataTable tr').length === 2) { // 2 because there is always one blank row to make the HTML valid
alert("Non è possibile eliminare tutte le indagini nella richiesta di preventivo. Se non si vogliono specificare indagini, scegliere INFORMAZIONI nel campo TIPO RICHIESTA");
return;
}
$('#dataTable tr:last').remove();
});
$('select[name="tipo_richiesta"]').on('change', function() {
$('.campiPreventivo').toggle();
$('#addRow').trigger('click');
});
});
</script>
</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">
<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" id="addRow"><br>
<input type="button" value="- Cancella Indagine" id="removeRow">
</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>
答案 2 :(得分：0)
也许尝试放置显示：内联;对于IE。