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) no puedo 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?

34
user80978 30 jul. 2009 a las 21:00

10 respuestas

La mejor respuesta

Algo así.

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

demo de trabajo.

42
SU3 7 abr. 2018 a las 06:48

Creo que para IE necesitará usar la propiedad srcElement del Objeto de evento. Si jQuery es una opción para usted, puede considerar usarlo, ya que abstrae la mayoría de las diferencias del navegador para usted. Ejemplo jQuery:

$("#tableId tr").click(function() {
   alert($(this).children("td").html());
});
4
Nick Riggs 30 jul. 2009 a las 17:07

Una forma simple es generar código de la siguiente manera:

<!DOCTYPE html>
<html>
<head>

<style>
  table, td {
      border:1px solid black;
  }
</style>

</head>
<body>
<p>Click on each tr element to alert its index position in the table:</p>
<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
  function myFunction(x) {
      alert("Row index is: " + x.rowIndex);
  }
</script>

</body>
</html>
1
Zolfaghari 28 oct. 2018 a las 13:50

Mi tabla está en otro iframe, así que modifiqué la respuesta SolutionYogi para 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>
0
Fco Javier Rod Ca 12 nov. 2013 a las 17:53

Así es como hago esto. Creo una tabla con etiquetas thead y tbody. Y luego agregue un evento click al elemento tbody por 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>
0
user3121053 2 may. 2017 a las 13:53

Cabeza atorada en jq por 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);
    }
}
1
redsquare 30 jul. 2009 a las 17:18

Si bien la mayoría de las respuestas son una copia de la respuesta de SolutionYogi, todas pasan por alto una verificación importante para ver si 'celda' no es nula, lo que devolverá un error si hace clic en los encabezados. Entonces, aquí está la respuesta con el cheque incluido:

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];
        // check if not null
        if(!cell) return; // no errors! 
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}
0
Cornelius 11 may. 2019 a las 19:04

Aquí hay una versión compacta y un poco más limpia de la misma solución pura Javascript ( no es una jQuery ) como se discutió anteriormente por @redsquare y @SolutionYogi (re: agregando {{X0 }} controladores de eventos para todas las filas de la tabla 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();

DEMO de trabajo

Nota : para que funcione también en IE8, en lugar del puntero this use el identificador explícito como function(myrow) como lo sugiere @redsquare. Atentamente,

3
Alexander Bell 20 abr. 2015 a las 02:22

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.

0
Luke Rinard 30 jul. 2009 a las 17:46
selectRowToInput();
function selectRowToInput(){
var table = document.getElementById("table");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++)
{
    var currentRow = table.rows[i];
    currentRow.onclick = function() {

       rows=this.rowIndex;
        console.log(rows);  
    };
}

}
0
SouMitya chauhan 3 ene. 2020 a las 19:57