Get Value Of Nearest Html Thead Element When Clicking On Td Cell

I have an HTML table which looks like this: Also, I have a jquery method which handles the event when a user clicks on a td in the table: As you can see I want to load data insi

Solution 1:

Since you have colspans involved one way is create an array for all the headings text. On page load go through all the <th colspan> and get the colspan value and use that value to push text into the headings array for each column spanned.

Then when you click a <td> use it's index within cells on that row to get the associated heading text from the headings array

// add some cell text for demodemoInit();

let spanHeadings = [];

$('thead th[colspan]').each(function() {
  const colspan = +this.colSpan,
    heading = $(this).find('.theader-text-nonstrong').text();
  // create as many headings as colspan length
  spanHeadings.push.apply(spanHeadings, Array(colspan).fill(heading));
});


$('#reservationtable tbody td').click(function() {
  const tdIdx = $(this).index() - 1;// subtract for the left `<th>`const heading = spanHeadings[tdIdx];
  console.clear()
  console.log('heading: ', heading)
});

functiondemoInit() {
  $('td:empty').text(function(i) {
    return'Cell ' + (i + 1)
  });

}

td {
  border: 1px solid #ccc;
  padding: 4px
}

table {
  border-collapse: collapse
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><tableclass="table table-bordered table-sm res-table"id="reservationtable"><thead><tr><thscope="col"class="theader-text td-border-right"><svgwidth="1em"height="1em"viewBox="0 0 16 16"class="bi bi-calendar"fill="currentColor"xmlns="http://www.w3.org/2000/svg"><pathfill-rule="evenodd"d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg></th><thscope="col"class="theader-text td-border-right"colspan="3"><spanclass='theader-text-nonstrong'>Span 1</span></th><thscope="col"class="theader-text td-border-right"colspan="3"><spanclass='theader-text-nonstrong'>Span 2</span><br></th><thscope="col"class="theader-text td-border-right"colspan="3"><spanclass='theader-text-nonstrong'>Span 3</span><br></th><thscope="col"class="theader-text td-border-right"colspan="3"><spanclass='theader-text-nonstrong'>Span 4</span></th></tr></thead><tbody><tr><thscope="col"class="td-border-right">Zeit</th><thscope="col">Platz 1</th><thscope="col">Platz 2</th><thscope="col"class="td-border-right">Platz 3</th><thscope="col">Platz 1</th><thscope="col">Platz 2</th><thscope="col"class="td-border-right">Platz 3</th><thscope="col">Platz 1</th><thscope="col">Platz 2</th><thscope="col"class="td-border-right">Platz 3</th><thscope="col">Platz 1</th><thscope="col">Platz 2</th><thscope="col"class="td-border-right">Platz 3</th></tr><tr><thscope="row"class="td-border-right">08:00</th><td></td><td></td><tdclass="td-border-right"></td><td></td><td></td><tdclass="td-border-right"></td><td></td><td></td><tdclass="td-border-right"></td><td></td><td></td><tdclass="td-border-right"></td></tr><tr><thscope="row"class="td-border-right">09:00</th><td></td><td></td><tdclass="td-border-right"></td><td></td><td></td><tdclass="td-border-right"></td><td></td><td></td><tdclass="td-border-right"></td><td></td><td></td><tdclass="td-border-right"></td></tr></tbody></table>