Agregar un evento onclick a una fila de la tabla

Question

Estoy tratando de agregar un evento onclick a una fila de la tabla a través de Javascript.

function addRowHandlers() { 
    var table = document.getElementById("tableId"); 
    var rows = table.getElementsByTagName("tr"); 
    for (i = 1; i < rows.length; i++) { 
     row = table.rows[i]; 
     row.onclick = function(){ 
          var cell = this.getElementsByTagName("td")[0]; 
          var id = cell.innerHTML; 
          alert("id:" + id); 
         }; 
    } 
} 

Esto funciona como se esperaba en Firefox, pero en Internet Explorer (IE8) que no puede acceder a las celdas de la tabla. Creo que de alguna manera está relacionado con el hecho de que "esto" en la función onclick se identifica como "Ventana" en lugar de "Tabla" (o algo así).

Si pudiera acceder a la fila actual podría realizar un getElementById en la función onclick por no puedo encontrar una manera de hacerlo. ¿Alguna sugerencia?

Gracias!

Answer 1

Algo como esto.

function addRowHandlers() { 
    var table = document.getElementById("tableId"); 
    var rows = table.getElementsByTagName("tr"); 
    for (i = 0; i < rows.length; i++) { 
     var currentRow = table.rows[i]; 
     var createClickHandler = 
      function(row) 
      { 
       return function() { 
             var cell = row.getElementsByTagName("td")[0]; 
             var id = cell.innerHTML; 
             alert("id:" + id); 
           }; 
      }; 

     currentRow.onclick = createClickHandler(currentRow); 
    } 
} 

EDITAR

Trabajando demo.

Answer 2

Cabeza atascada en jq durante demasiado tiempo. Esto funcionará

function addRowHandlers() { 
    var table = document.getElementById("tableId"); 
    var rows = table.getElementsByTagName("tr"); 
    for (i = 1; i < rows.length; i++) { 
     var row = table.rows[i]; 
     row.onclick = function(myrow){ 
          return function() { 
          var cell = myrow.getElementsByTagName("td")[0]; 
          var id = cell.innerHTML; 
          alert("id:" + id); 
         }; 
        }(row); 
    } 
} 

Answer 3

pienso para IE que tendrá que utilizar la propiedad srcElemento del Event object. si jQuery es una opción para usted, le recomendamos que la use, ya que abstrae la mayoría de las diferencias de navegador para usted. Ejemplo jQuery:

$("#tableId tr").click(function() { 
    alert($(this).children("td").html()); 
}); 

Answer 4

Intente cambiar la línea this.getElementsByTagName("td")[0]) para leer row.getElementsByTagName("td")[0];. Eso debería capturar la referencia row en un cierre, y debería funcionar como se esperaba.

Editar: Lo anterior es incorrecto, ya que la fila es una variable global, como han dicho otros, asigne una nueva variable y luego use ESO en el cierre.

Answer 5

Mi mesa está en otro iframe por lo modifiqué SolutionYogi respuesta a trabajar con eso:

<script type="text/javascript"> 
window.onload = addRowHandlers; 
function addRowHandlers() { 
    var iframe = document.getElementById('myiframe'); 
    var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document; 

    var table = innerDoc.getElementById("mytable"); 
    var rows = table.getElementsByTagName("tr"); 
    for (i = 0; i < rows.length; i++) { 
     var currentRow = table.rows[i]; 
     var createClickHandler = 
      function(row) 
      { 
       return function() { 
             var cell = row.getElementsByTagName("td")[0]; 
             var id = cell.innerHTML; 
             alert("id:" + id); 
           }; 
      } 

     currentRow.onclick = createClickHandler(currentRow); 
    } 
} 
</script> 

Answer 6

Aquí es un compacto y una versión poco más limpia de la misma pura Javascript (no es un jQuery) solución como se discutió anteriormente por @redsquare y @SolutionYogi (re: agregar controladores de eventos onclick a todas las filas de tablas HTML) que funciona en todos los principales navegadores web, incluido el último IE11:

function addRowHandlers() { 
    var rows = document.getElementById("tableId").rows; 
    for (i = 0; i < rows.length; i++) { 
     rows[i].onclick = function(){ return function(){ 
       var id = this.cells[0].innerHTML; 
       alert("id:" + id); 
     };}(rows[i]); 
    } 
} 
window.onload = addRowHandlers(); 

Trabajando DEMO

Nota: con el fin de hacer que funcione en IE8, así, en lugar de this uso puntero del identificador explícito como function(myrow) según lo sugerido por @redsquare. Saludos cordiales,

Answer 7

Estaba tratando de seleccionar una fila de la tabla, para que se pueda copiar fácilmente en el portapapeles y luego pegarla en Excel. A continuación hay una pequeña adaptación de su solución.

Referencias:

• Where I took the window.prompt line from (Jarek Milewski):

  The user is presented with the prompt box, where the text to be copied is already selected...

• For selecting a complete table (Tim Down). Muy interesante, pero no pude adaptarme para un elemento <tr>.

<!DOCTYPE html> 
<html> 
<body> 

<div> 
    <table id="tableId" border=1> 
     <tbody> 
     <tr><td>Item <b>A1</b></td><td>Item <b>B1</b></td></tr> 
     <tr><td>Item <b>A2</b></td><td>Item <b>B2</b></td></tr> 
     <tr><td>Item <b>A3</b></td><td>Item <b>B3</b></td></tr> 
     </tbody> 
    </table> 
</div> 

<script> 
function addRowHandlers() { 
    var table = document.getElementById("tableId"); 
    var rows = table.getElementsByTagName("tr"); 
    for (i = 0; i < rows.length; i++) { 
     var currentRow = table.rows[i]; 
     var createClickHandler = 
      function(row) 
      { 
       return function() { 
             var cell = row.getElementsByTagName("td")[0]; 
             var id = cell.innerHTML; 

             var cell1 = row.getElementsByTagName("td")[1]; 
             var id2 = cell1.innerHTML; 
             // alert(id + " - " + id2); 
             window.prompt("Copy to clipboard: Ctrl+C, Enter", "<table><tr><td>" + id + "</td><td>" + id2 + "</td></tr></table>") 
           }; 
      }; 

     currentRow.onclick = createClickHandler(currentRow); 
    } 
} 
window.onload = addRowHandlers(); 
</script> 
</body> 
</html> 

Answer 8

Aquí es cómo hacer esto. Creo una tabla con etiquetas thead y tbody. Y luego agregue un evento de clic al elemento tbody mediante id.

<script> 
    document.getElementById("mytbody").click = clickfunc; 
    function clickfunc(e) { 
     // to find what td element has the data you are looking for 
     var tdele = e.target.parentNode.children[x].innerHTML; 
     // to find the row 
     var trele = e.target.parentNode; 
    } 
</script> 
<table> 
    <thead> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
     </tr> 
    </thead> 
    <tbody id="mytbody"> 
     <tr><td>Data Row</td><td>1</td></tr> 
     <tr><td>Data Row</td><td>2</td></tr> 
     <tr><td>Data Row</td><td>3</td></tr> 
    </tbody> 
</table>