मैं टेबल सेल (td) से संबंधित टेबल हेडर (वें) कैसे प्राप्त कर सकता हूं?

Question

निम्नलिखित तालिका को देखते हुए, मैं प्रत्येक 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>

यह देखते हुए कि मेरे पास वर्तमान में कोई भी tdतत्व मेरे पास पहले से उपलब्ध है, मैं तत्संबंधी thतत्व कैसे खोज सकता हूं ?

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

Comments

कोई भी उत्तर इस संभावना को ध्यान में नहीं रखता है कि वें में 1 से अधिक कोलस्पैन हो सकता है जो कि मेरे उपयोग का मामला है :(

— डेक्सिजन

@GeorgeJempty मेरा जवाब colspans संभालता है।

— doug65536

Answer 1

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

या थोड़ा सा सरलीकृत

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

Comments

यदि आपकी टेबल में अधिक टेबल लगा हो, तो .parent('table')इसके बजाय का उपयोग करें.closest('table')

— Dead.Rabit

Colspans के बारे में क्या?

— ब्रैडविदो

@bradvido - मेरा जवाब है कि खाते में

— vsync

Answer 2

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

एक से अधिक होने पर तालिका का संदर्भ देने के लिए आईडी का उपयोग करना सबसे अच्छा होगा।

Comments

पेज में एक से अधिक टेबल हो सकते हैं, जिससे यह समाधान अविश्वसनीय हो जाता है

— vsync

Answer 3

समाधान जो संभालता है colspan

मैं एक समाधान के बाईं बढ़त मिलान के आधार पर tdइसी के बाएं किनारे पर th। यह मनमाने ढंग से जटिल जुकाम से निपटना चाहिए।

मैंने यह दिखाने के लिए परीक्षण मामले को संशोधित किया कि मनमाना colspanसही ढंग से संभाला जाता है।

लाइव डेमो

जे एस

$(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;
  }
});

सीएसएस

.highlight {
  background-color: #EEE;
}

एचटीएमएल

<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>

Comments

मैंने एक साथ colspanहेडर और पंक्तियों में मनमाने ढंग से संयोजनों का उपयोग करने के लिए परीक्षण मामले का विस्तार किया , और यह अभी भी काम कर रहा है। मैं किसी भी ऐसे मामले के बारे में सुनकर खुश होऊंगा जो आप पा सकते हैं कि इसके साथ काम नहीं होगा।

— doug65536

Answer 4

आप इसे td के सूचकांक का उपयोग करके कर सकते हैं:

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

Comments

याद रखें कि .index()शून्य-आधारित है, और nth-childएक-आधारित है। तो परिणाम एक के बाद एक होगा। : ओ)

— user113716

Answer 5

शुद्ध जावास्क्रिप्ट समाधान:

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) + ')')

Answer 6

खाता सूचकांक के मुद्दों को ध्यान में रखते हुए, मिलान के thलिए मिलान खोजें ।tdcolspan

$('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>

Answer 7

यह आसान है, यदि आप उन्हें सूचकांक द्वारा संदर्भित करते हैं। यदि आप पहला कॉलम छुपाना चाहते हैं, तो आप:

कोड को कॉपी करें

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

कारण मैंने पहली बार सभी तालिका पंक्तियों को चुना था और फिर दोनों td's और वें दोनों n'th बच्चे थे ताकि हमें तालिका और सभी तालिका पंक्तियों का दो बार चयन न करना पड़े। यह स्क्रिप्ट निष्पादन गति में सुधार करता है। ध्यान रखें, nth-child()है 1आधारित, नहीं 0।