title: Relying td events to underlaying tr
body: <p>I added an event handler to a tr with the following code:</p>
  
  <pre><code>function addRow(pipe, date) 
      var table = document.getElementById("myTableData");
      row.insertCell(0).textContent=pipe;
      row.insertCell(1).textContent=date;
      row.value=pipe;
      if(row.addEventListener){
          row.addEventListener('mouseup', touched);
      } else{
          row.attachEvent('mouseup', touched);
      }
      if(row.addEventListener){
          row.addEventListener('mousedown', mousedown);
      } else{
          row.attachEvent('mousedown', mousedown);
      }
   }
  </code></pre>
  
  <p>This the code of the touched and mousedown events:</p>
  
  <pre><code>function touched(event) {
     if (navigator.appName == 'Microsoft Internet Explorer' ||  !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv 11/)) || $.browser.msie == 1){
          tr=event.srcElement;
      } else {
           var tr=event.target;
      }
      var value=tr.value;
  //console.log("value:"+value);
      setTimeout(function() {
          tr.style.backgroundColor = "#EEEEEE";
          setTimeout(function() {
             var pipe=pipes[value];
      //console.log("pipe: "+JSON.stringify(pipe));
             var date=pipe.workdate;
             var measurement=pipe.measurement;
             var order=measurement.order;
             var heat=measurement.heat;
             var lot=measurement.lot;
             var tube=measurement.tube;
             var wallThickness=measurement.wallThickness;
             var outletDiameter=measurement.outletDiameter;
             var lenght=measurement.length;
             var detailUrl="detailTable.html?pipe="+value+"&amp;date="+encodeURIComponent(date)+"&amp;order="+order+"&amp;heat="+heat+"&amp;lot="+lot+"&amp;tube="+tube+"&amp;wallThickness="+wallThickness+"&amp;outletDiameter="+outletDiameter+"&amp;lenght="+lenght;
            //alert("passo: "+detailUrl);
            window.location.href = detailUrl;
          }, 150)
      }, 300)
  }
  
  function mousedown(event) {
      if (navigator.appName == 'Microsoft Internet Explorer' ||  !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv 11/)) || $.browser.msie == 1){
          tr=event.srcElement;
      } else {
           var tr=event.target;
      }
      tr.style.backgroundColor = "FFFFFFF";  
  }
  </code></pre>
  
  <p>and finally this is the style of the page:</p>
  
  <pre><code>&lt;style&gt;
      .fixed_headers {
          width: 750px;
          table-layout: fixed;
          border-collapse: collapse;
      }
      .fixed_headers th {
          text-decoration: underline;
      }
      .fixed_headers th,
      .fixed_headers td {
          padding: 5px;
          text-align: left;
      }
      .fixed_headers td:nth-child(1),
      .fixed_headers th:nth-child(1) {
          min-width: 200px;
      }
      .fixed_headers td:nth-child(2),
      .fixed_headers th:nth-child(2) {
          min-width: 200px;
      }
      .fixed_headers td:nth-child(3),
      .fixed_headers th:nth-child(3) {
          width: 350px;
      }
      .fixed_headers thead {
          background-color: #333333;
          color: #fdfdfd;
      }
      .fixed_headers thead tr {
          display: block;
          position: relative;
      }
      .fixed_headers tbody {
          display: block;
          overflow: auto;
          width: 100%;
          height: 300px;
      }
      .fixed_headers tbody tr:nth-child(even) {
          background-color: #dddddd;
      }
      .old_ie_wrapper {
          height: 300px;
          width: 750px;
          overflow-x: hidden;
          overflow-y: auto;
      }
      .old_ie_wrapper tbody {
          height: auto;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Yet when I click on a cell in the table it is itself highlighted but no event on the tr is activated. If on a large screen I click outside the cells, the row event is correctly handled. How do I make the td's transparent so to have all events been caught by the tr?</p>