How to Get Display:Table-Cell Support in Ie? Any Pure JavaScript or Jquery Workaround

display :table-cell does not work in ie 7?

If you desperately need functionality that can only be provided by display: table-cell in IE7, you have two choices:

Use a real <table> and suffer unsemantic HTML.
Use JavaScript for IE7 (and lower) to fix it: http://tanalin.com/en/projects/display-table-htc/

Display already hidden table cells in IE with CSS

You need to use display: table-cell; or display: table-row; in your separate class, for your <td> and <tr> tags respectively.

This won't work in IE6/7, so there are 2 other alternatives:

Nest a <span> tag and use the display: (none|block) property in CSS on this instead.
Use text-indent: (-9999em|0) to push the text off screen.

hiding table cells with javascript

I'm not sure if you want to use jQuery or not. And since there's already a couple jQuery answers already here's a pure JavaScript solution:

jsfiddle

Javascript

var data = document.querySelectorAll('td');

Array.prototype.forEach.call(data, function(td){

    var hide = Array.prototype.some.call(td.children, function(div){
        return div.style.display == "none";
    });

    if (hide) {
        td.style.display = "none";
    }
});

How do I iterate through table rows and cells in JavaScript?

If you want to go through each row(<tr>), knowing/identifying the row(<tr>), and iterate through each column(<td>) of each row(<tr>), then this is the way to go.

var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     //iterate through columns
     //columns would be accessed using the "col" variable assigned in the for loop
   }  
}

If you just want to go through the cells(<td>), ignoring which row you're on, then this is the way to go.

var table = document.getElementById("mytab1");
for (var i = 0, cell; cell = table.cells[i]; i++) {
     //iterate through cells
     //cells would be accessed using the "cell" variable assigned in the for loop
}

Javascript - get all table - tr values

var rows = document.getElementsByTagName("table")[0].rows;
var last = rows[rows.length - 1];
var cell = last.cells[0];
var value = cell.innerHTML

Try it yourself here: http://jsfiddle.net/ReyNx/.

Obviously you'll have to change document.getElementsByTagName("table")[0] to appropriately match your table

If you're using jQuery it's easier:

var value = $('table tr:last td').text();

For more info, see the MDN DOM reference, which shows you which properties are available on which elements to traverse the DOM.

IE not desired new line on TD dynamically added with Javascript

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 :-)

Complete solution

<!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>

Create table using Javascript

This should work (from a few alterations to your code above).

function tableCreate() {  var body = document.getElementsByTagName('body')[0];  var tbl = document.createElement('table');  tbl.style.width = '100%';  tbl.setAttribute('border', '1');  var tbdy = document.createElement('tbody');  for (var i = 0; i < 3; i++) {    var tr = document.createElement('tr');    for (var j = 0; j < 2; j++) {      if (i == 2 && j == 1) {        break      } else {        var td = document.createElement('td');        td.appendChild(document.createTextNode('\u0020'))        i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null;        tr.appendChild(td)      }    }    tbdy.appendChild(tr);  }  tbl.appendChild(tbdy);  body.appendChild(tbl)}tableCreate();

CSS display:inline/none with tables works with Firefox but not Chrome or Safari

Here's a a working example. While making it, I didn't know you did not want to use jQuery, but I strongly recommend you to change your mind, since all you have to do is adding this to your html, preferably just before the closing </body> tag:

<script src="http://code.jquery.com/jquery-1.7.2.min.js">
$(document).ready(function () {
  $('input').on("click", function () {
      var inputValue = $(this).val();
      var index = inputValue.indexOf("#")
      var divId = "#tbl" + inputValue.substr(index+1);
      $(divId).toggle();
  }); 
});
</script>

I also changed the html a bit: I'm using 1 input per table: "show or hide" in 1 button.
But you can ofcourse use 2 buttons for it: just change the jQuery and call hide() or show() accordingly. If you really don't wanna use jQuery, you could convert my example to pure JavaScript, but it seems like that's gonna take a bit more coding for you :)