He usado JQuery para agregar un botón de "imagen" a unas pocas filas en una tabla. Use el siguiente código:

$("#tblResults tr:nth-child(1) td.ResultsHeader span.gridRCHders").each(function(){
    var cat = $.trim($(this).text());
    if(cat.length > 0){
        if(cat.toLowerCase() != "total"){
            options.xAxis.categories.push(cat);
        }
    }
});

Que básicamente pasa por la primera fila de la tabla y almacena los valores de la celda en una matriz de categorías. Estoy haciendo cambios en un sitio existente, así que realmente no puedo cambiar el diseño de la tabla.

Lo que noté es que en algunas páginas, se muestra más de una tabla, mis botones de imagen se agregan correctamente, pero lo que necesito cambiar es el código anterior para leer la primera fila de la tabla en la que está la imagen ... He intentado lo siguiente pero parece que no funciona:

$("img.ChartButton").click(function(){
    var currentTable = $(this).closest("tr").closest("table").filter("tr:nth-child(1) td.ResultsHeader span.gridRCHders");

    options.xAxis.categories = [];
    currentTable.each(function(){
        var cat = $.trim($(this).text());
        if(cat.length > 0){
            if(cat.toLowerCase() != "total"){
                options.xAxis.categories.push(cat);
            }
        }
    });
});

Cualquier ayuda será de gran utilidad. Gracias

H

EDITAR: encuentre a continuación una copia de una de las tablas, como puede ver en la fila 2, tengo una imagen "ChartButton", puede estar en cualquier fila de 2 en adelante, y pueden ser más de una en la tabla. Lo que debo hacer es que cuando se hace clic en la imagen, los datos en la fila UNO de la tabla actual (podrían ser más de una tabla en la página) se leen y se guardan en la matriz de categorías (ver el código anterior). Espero que esto ayude.

 <table cellspacing="1" cellpadding="2" border="0" class="whiteBorder">
    <tbody>
        <tr>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">&nbsp;</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Jan</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Feb</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Mar</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Apr</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">May</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Jun</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Jul</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Aug</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Sep</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Oct</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Nov</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Dec</span></td>
            <td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Total</span></td>
        </tr>
        <tr class="lGreyBG">
            <td align="left" colspan="15">
                <span class="gridTXT"><b>KPI</b>&nbsp;<img width="20" alt="Chart" src="Images/chart_bar.png" id="c0_1" class="ChartButton"></span>
            </td>
        </tr>
        <tr class="lGreyBGalt">
            <td nowrap="" class="ResultsHeader"><span class="gridRCHders">Pre Conversion %</span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>65 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>65 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>66 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>62 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>67 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>67 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>68 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>69 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
            <td nowrap="" align="right"><span class="gridTXT"><i>66 %</i></span></td>
        </tr>           
    </tbody>
</table>

EDITAR: Finalmente haga que funcione, a continuación se muestra la línea que tuve que usar para obtener los datos correctos en la primera fila ...

var $row = $(this).closest('table').children('tbody').children('tr:first').children('td.ResultsHeader').children('span.gridRCHders');

No estoy seguro de por qué necesitaba todas las llamadas de los niños, ya que intenté lo siguiente primero que no funcionó:

var $row = $(this).closest('table').children('tbody').children('tr:first td.ResultsHeader span.gridRCHders');

Gracias a todos a continuación por la ayuda.

23
Harag 3 ago. 2011 a las 13:29

6 respuestas

La mejor respuesta

De acuerdo, si se hace clic en una imagen de una tabla, desea los datos de la primera fila de la tabla en la que se encuentra esta imagen.

//image click stuff here {
$(this). // our image
closest('table'). // Go upwards through our parents untill we hit the table
children('tr:first'); // Select the first row we find

var $row = $(this).closest('table').children('tr:first');

parent() solo obtendrá el padre directo, closest debe hacer lo que queremos aquí. De los documentos de jQuery: Obtenga el primer elemento ancestro que coincida con el selector, comenzando en el elemento actual y progresando a través del árbol DOM.

36
Alexander Varwijk 3 ago. 2011 a las 10:34

Esta es una mejor solución, utilizando:

$("table tr:first-child").has('img')

5
JonH 24 mar. 2020 a las 19:20

En realidad, si intenta utilizar la función "hijos", no tendrá éxito porque es posible que la tabla tenga un primer hijo como "esto". Por lo tanto, debe usar la función 'buscar' en su lugar.

Camino equivocado:

var $row = $(this).closest('table').children('tr:first');

Forma correcta:

 var $row = $(this).closest('table').find('tr:first');
2
Zakaria Acharki 14 ago. 2017 a las 17:18

¿No puede usar el selector first?

Algo como: tr:first

3
JMax 3 ago. 2011 a las 09:32

JQuery no es necesario, solo puede usar javascript.

<table id="table">
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
   ......
  <tr>...</tr>
</table>

El objeto de tabla tiene una colección de todas las filas.

var myTable = document.getElementById('table');
var rows =  myTable.rows;
var firstRow = rows[0];
4
Yonatan Alexis Quintero Rodrig 24 nov. 2014 a las 16:03

Al final del juego, pero esto funcionó para mí:

$("#container>table>tbody>tr:first").trigger('click');
14
bbqchickenrobot 27 abr. 2013 a las 09:46