I wrote a JS script to dynamically add rows on a table. On a select element change, this script reads an HTML div set to display:none and clone this template with CloneNode(True) method. Then, it adds this new object before a placeholder span.
Here are my codes 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>
Now, my problem is when i run this script on IE browsers (every versions i checked) it adds my rows with a new line after each TD element. This is not what i want and it is not the behaviour i have on Chrome, Firefox, Safari, etc...
You can browse to http://www.geoemmelle.it/contatti.html using everything but IE and then select "Preventivo" in the first field to fire up the script. Then, do the same with IE and check the difference.
I really don't know how to approach this. Is there anybody out there who knows about this issue?
Thank you in advance for your help!
EDIT:
It seems like a "new line" is appended after every TD element of the TR element in the DIV I add. Please, any help to figure out how to find a solution?
Thanks again.
Although I have already answered with a JavaScript solution, here is a version that uses the jQuery JavaScript library, which I hope you can see is a lot less code, although has the (small) overhead of including the jQuery library.
The click and change events are bound using jQuery functions, rather than the older onclick and onchange events. It's not a complete solution as the dynamic rows are not hidden when the drop down is changed back. Let's say that I left this as an learning exercise :-)
<!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>