Pregunta ¿Cómo puedo obtener el encabezado de tabla correspondiente (th) desde una celda de tabla (td)?


Dada la siguiente tabla, ¿cómo obtendría el encabezado de tabla correspondiente para cada elemento td?

<table>
    <thead> 
        <tr>
            <th id="name">Name</th>
            <th id="address">Address</th>
        </tr>
    </thead> 
    <tbody>
        <tr>
            <td>Bob</td>
            <td>1 High Street</td>
        </tr>
    </tbody>
</table>

Dado que actualmente tengo alguno de los td elementos disponibles para mí ya, ¿cómo podría encontrar el correspondiente th ¿elemento?

var $td = IveGotThisCovered();
var $th = GetTableHeader($td);

74
2017-08-19 16:09


origen


Respuestas:


var $th = $td.closest('tbody').prev('thead').find('> tr > th:eq(' + $td.index() + ')');

O un poco simplificado

var $th = $td.closest('table').find('th').eq($td.index());

124
2017-08-19 16:13



var $th = $("table thead tr th").eq($td.index())

Lo mejor sería usar una identificación para hacer referencia a la tabla si hay más de una.


6
2017-08-19 16:15



Puedes hacerlo usando el índice de td:

var tdIndex = $td.index() + 1;
var $th = $('#table tr').find('th:nth-child(' + tdIndex + ')');

4
2017-08-19 16:15



Solución que maneja colspan

Tengo una solución basada en hacer coincidir el borde izquierdo de la td al borde izquierdo de la correspondiente th. Debe manejar colspans arbitrariamente complejas.

Modifiqué el caso de prueba para mostrar que arbitraria colspan se maneja correctamente

Demo en vivo

JS

$(function($) {
  "use strict";

  // Only part of the demo, the thFromTd call does the work
  $(document).on('mouseover mouseout', 'td', function(event) {
    var td = $(event.target).closest('td'),
        th = thFromTd(td);
    th.parent().find('.highlight').removeClass('highlight');
    if (event.type === 'mouseover')
      th.addClass('highlight');
  });

  // Returns jquery object
  function thFromTd(td) {
    var ofs = td.offset().left,
        table = td.closest('table'),
        thead = table.children('thead').eq(0),
        positions = cacheThPositions(thead),
        matches = positions.filter(function(eldata) {
          return eldata.left <= ofs;
        }),
        match = matches[matches.length-1],
        matchEl = $(match.el);
    return matchEl;
  }

  // Caches the positions of the headers,
  // so we don't do a lot of expensive `.offset()` calls.
  function cacheThPositions(thead) {
    var data = thead.data('cached-pos'),
        allth;
    if (data)
      return data;
    allth = thead.children('tr').children('th');
    data = allth.map(function() {
      var th = $(this);
      return {
        el: this,
        left: th.offset().left
      };
    }).toArray();
    thead.data('cached-pos', data);
    return data;
  }
});

CSS

.highlight {
  background-color: #EEE;
}

HTML

<table>
    <thead> 
        <tr>
            <th colspan="3">Not header!</th>
            <th id="name" colspan="3">Name</th>
            <th id="address">Address</th>
            <th id="address">Other</th>
        </tr>
    </thead> 
    <tbody>
        <tr>
            <td colspan="2">X</td>
            <td>1</td>
            <td>Bob</td>
            <td>J</td>
            <td>Public</td>
            <td>1 High Street</td>
            <td colspan="2">Postfix</td>
        </tr>
    </tbody>
</table>

3
2018-05-19 02:18



La solución de JavaScript puro:

var index = Array.prototype.indexOf.call(your_td.parentNode.children, your_td)
var corresponding_th = document.querySelector('#your_table_id th:nth-child(' + (index+1) + ')')

2
2018-05-19 01:53



Encontrar coincidencias th para td, teniendo en cuenta colspan problemas de índice.

$('table').on('click', 'td', get_TH_by_TD)

function get_TH_by_TD(e){
   var idx = $(this).index(),
       th, th_colSpan = 0;

   for( var i=0; i < this.offsetParent.tHead.rows[0].cells.length; i++ ){
      th = this.offsetParent.tHead.rows[0].cells[i];
      th_colSpan += th.colSpan;
      if( th_colSpan >= (idx + this.colSpan) )
        break;
   }
   
   console.clear();
   console.log( th );
   return th;
}
table{ width:100%; }
th, td{ border:1px solid silver; padding:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Click a TD:</p>
<table>
    <thead> 
        <tr>
            <th colspan="2"></th>
            <th>Name</th>
            <th colspan="2">Address</th>
            <th colspan="2">Other</th>
        </tr>
    </thead> 
    <tbody>
        <tr>
            <td>X</td>
            <td>1</td>
            <td>Jon Snow</td>
            <td>12</td>
            <td>High Street</td>
            <td>Postfix</td>
            <td>Public</td>
        </tr>
    </tbody>
</table>


0
2017-09-10 09:43



Eso es simple, si los referencia por índice. Si quieres ocultar la primera columna, deberías:

Copiar código     $ ('# thetable tr'). find ('td: nth-child (1), th: nth-child (1)'). toggle ();

La razón por la que seleccioné por primera vez todas las filas de la tabla y luego los tds y th's que eran los n-ésimo hijos es para que no tengamos que seleccionar la tabla y todas las filas de la tabla dos veces. Esto mejora la velocidad de ejecución del script. Tenga en cuenta, nth-child() es 1 basado, no 0.


0
2018-06-11 09:24