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 demo
demoInit();

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

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

}

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

table {
  border-collapse: collapse
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-sm res-table" id="reservationtable">
  <thead>
    <tr>
      <th scope="col" class="theader-text td-border-right"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-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>
      <th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 1</span></th>
      <th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 2</span><br></th>
      <th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 3</span><br></th>
      <th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 4</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="col" class="td-border-right">Zeit</th>
      <th scope="col">Platz 1</th>
      <th scope="col">Platz 2</th>
      <th scope="col" class="td-border-right">Platz 3</th>
      <th scope="col">Platz 1</th>
      <th scope="col">Platz 2</th>
      <th scope="col" class="td-border-right">Platz 3</th>
      <th scope="col">Platz 1</th>
      <th scope="col">Platz 2</th>
      <th scope="col" class="td-border-right">Platz 3</th>
      <th scope="col">Platz 1</th>
      <th scope="col">Platz 2</th>
      <th scope="col" class="td-border-right">Platz 3</th>
    </tr>
    <tr>
      <th scope="row" class="td-border-right">08:00</th>
      <td></td>
      <td></td>
      <td class="td-border-right"></td>
      <td></td>
      <td></td>
      <td class="td-border-right"></td>
      <td></td>
      <td></td>
      <td class="td-border-right"></td>
      <td></td>
      <td></td>
      <td class="td-border-right"></td>
    </tr>
    <tr>
      <th scope="row" class="td-border-right">09:00</th>
      <td></td>
      <td></td>
      <td class="td-border-right"></td>
      <td></td>
      <td></td>
      <td class="td-border-right"></td>
      <td></td>
      <td></td>
      <td class="td-border-right"></td>
      <td></td>
      <td></td>
      <td class="td-border-right"></td>
    </tr>
  </tbody>
</table>