单击 td 单元格时获取最近的 HTML thead 元素的值答案

【问题标题】：Get Value of nearest HTML thead element when clicking on td cell单击 td 单元格时获取最近的 HTML thead 元素的值
【发布时间】：2020-09-23 07:04:42
【问题描述】：

我有一个如下所示的 HTML 表格：

    jQuery(document).ready(function($) {
    $('#reservationtable tbody tr td').on('click', function () {
        var reservationtime = $( this ).siblings('th').text();
        var header = $(this).next('.theader-text-nonstrong').val();
        $('#modalvon').text(reservationtime);
        $('#modalbis').text(addMinutes(reservationtime, '60'));
        $('#modaldatum').text(header);
        $("#confirmreservierung").modal("show");
    });
});

<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"><?php echo "<span class='theader-text-nonstrong'>" . date("l") . "</span><br>" . date("d.m.Y"); ?></th>
                <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+1 day")). "</span><br>" . date("d.m.Y", strtotime("+1 day")); ?></th>
                <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+2 day")). "</span><br>" . date("d.m.Y", strtotime("+2 day")); ?></th>
                <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+3 day")). "</span><br>" . date("d.m.Y", strtotime("+3 day")); ?></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>
            <tr>
                <th scope="row" class="td-border-right">10: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">11: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">12: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">13: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">14: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">15: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">16: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">17: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">18: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">19: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">20: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>

另外，我有一个 jquery 方法，当用户单击表中的 td 时处理该事件：

如您所见，我想在引导模式中加载数据。我想从被点击的 td 的列标题中获取值。特别是我想通过'theater-text-nonstrong'类来获得跨度的价值。当前的方法只给我一个空值。

感谢您的帮助！

【问题讨论】：

不，因为解决方案在我的程序中不起作用
@freedomn-m 检索模态框内的 [object Object]
@freedomn-m 你能用一个简短的例子告诉我它是如何工作的吗？我的 jquery 不是很好。
@freedomn-m 好的，这个解决方案让我很开心，但问题是它只在某些单元格上工作，而且它不能从 td 所在的“正确”列中获取值是
我的错，没有注意到提供的大量 html 中的 colspans

标签： javascript php html jquery

【解决方案1】：

由于涉及到 colspan，一种方法是为所有标题文本创建一个数组。在页面加载时，遍历所有 <th colspan> 并获取 colspan 值并使用该值将文本推送到所跨越的每一列的标题数组中。

然后，当您单击 <td> 时，使用它在该行单元格中的索引从标题数组中获取关联的标题文本

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

【讨论】：