我编写了一个 JS 脚本来在表格上动态添加行。在选择元素更改时,此脚本读取设置为 display:none 的 HTML div,并使用 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 元素之后都附加了一个“新行”。请帮助找出如何找到解决方案?
再次感谢。