程序员经验分享-hwhale

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

2023-12-10

我有一个 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>
Also, I have a jquery method which handles the event when a user clicks on a td in the table:

正如您所看到的，我想在引导模式内加载数据。我想从单击的 td 的列标题中获取值。特别是我想通过“theater-text-nonstrong”类获得跨度的价值。当前的方法只能得到一个空值。

感谢您的帮助！


由于涉及 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

php

html

jQuery

单击 td 单元格时获取最近的 HTML thead 元素的值 的相关文章

  • 如何使用 PHP 从 MySQL 查询中按升序对值进行排序？

    我使用以下 PHP 脚本从 MySQL 表中获取和更改数据 并将结果打印在 HTML 表中 我希望按升序对数据进行排序 utilization percentage变量 它是由创建的 total client time total avai

  • 对数字和字母元素的数组进行排序（自然排序）

    假设我有一个数组 var arr 1 5 ahsldk 10 55 3 2 7 8 1 2 75 abc huds 我尝试对其进行排序 我得到了类似的东西 1 1 10 2 2 3 5 55 7 75 8 abc ahsldk huds 注

  • 是否可以使用 Javascript 读取 PHP 会话？

    我正在使用 cakePHP 1 26 在控制器中 我得到了一个包含以下代码行的函数 this gt Session gt write testing user this gt Session gt read testing 现在系统编写了一

  • 在IOS中，引导模式中的iframe无法滚动

    我在引导程序模态体内有一个 iframe div class modal fade div class modal dialog div class modal content div class modal header div div

  • 比较 javascript 元素和 scala 变量的 Play 框架 Twirl 模板

    如下面的代码示例所示 我想比较 scala 辅助元素内的 javascript 元素 然而 即使存在元素 abcde 它也始终返回 false 除了使用标签之外 如何获取 scala 辅助元素内的 javascript 值 appSeq S

  • Google 地图 v3 中标准缩放控件的样式

    有没有一种简单的方法可以在 Google Maps JavaScript API v3 中设置缩放控件的样式 我想要的只是改变标准图像 http maps gstatic com intl en ALL mapfiles mapcontro

  • 使用 PHP 5.3 ?: 运算符

    有了这个测试页 page int GET page 1 echo page 我不明白页面未定义时得到的输出 Request Result page 2 2 page 3 3 page 1 error Undefined index page

  • Jade（当前称为“Pug”）模板引擎中的循环

    我想使用一个简单的循环 例如for int i 0 i lt 10 i 如何在 Jade 引擎中使用它 我正在使用 Node js 并使用expressjs 框架 例如 for var i 0 i lt 10 i li array i 你可

  • Zend Framework 2 将变量传递给模型

    我目前正在开发一个多语言网站 对于多语言部分 我使用翻译器 poedit 我将所选语言存储在会话中 效果很好 模块 php public function onBootstrap MvcEvent e session new Contain

  • 加载 Ember.View 的内容后初始化 jQuery 插件

    DEBUG Ember VERSION 1 0 0 rc 6 ember js DEBUG Handlebars VERSION 1 0 0 rc 4 ember js DEBUG jQuery VERSION 1 9 1 控制器是一个Em

  • 如何获取本地主机系统的公共IP地址[重复]

    这个问题在这里已经有答案了 我已连接到局域网 我可以访问互联网 使用浏览器 我可以使用搜索 我的 IP 是什么 找到我的公共 IP 我想使用php获取公共IP 我正在我的中运行脚本localhostwamp服务器 I tried SERVE

  • 在浏览器上录制视频并上传到LAMP服务器

    我已经尝试了很多东西 red5 jquery 网络摄像头 html5 但这些解决方案都没有录制视频并准备好上传到服务器 无论如何 html5 flash 等等 更好的跨浏览器解决方案 最好的 上传视频 音频 并将结果上传到服务器 我猜是通过

  • 响应式菜单：悬停子菜单显示错误

    简而言之 我根据教程创建了一个响应式菜单 当您将鼠标悬停在投资组合按钮上时 菜单应该显示子菜单 而在移动模式下 您需要按该按钮才能显示子菜单 效果很好 问题是该教程有一个错误 如果您在桌面模式下按组合按钮 子菜单将不会再次显示 除非您按 单

  • 地址更改时如何停止 Angular 重新加载

    我正在使用 Angular 的scrollTo and anchorScroll像这样 app controller TestCtrl function scope location anchorScroll scope scrollTo

  • 从命令行运行 PHP 脚本

    如何使用用于解析 Web 脚本的 PHP 解释器从命令行运行 PHP 脚本 我有一个phpinfo php从网络访问的文件显示German已安装 但是 如果我运行phpinfo php从命令行使用 php phpinfo php and g

  • 如果在 HTML 标记中使用自定义属性会发生什么？

    这个问题与以下内容无关jQuery本身 但我发现了一个名为Metadata found there http docs jquery com Plugins Metadata metadata其中一个示例使用自定义标签属性 li li 问

  • PHP邮件功能有时可以工作

    我正在编写一个脚本 需要通过PHP邮件功能发送电子邮件 如下所示 它在向 gmail 帐户发送电子邮件时有效 但在我的域中的帐户却无效 我们正在运行 Exchange 服务器 截至目前 电子邮件是从 www server 发送的 有谁知道

  • jQuery fadeOut 一个 div，fadeIn 另一个 div 在其位置

    我正在尝试一个简单的 jQuery 脚本来淡出一个 div 并淡入另一个 div 但由于某种原因 第一个 div 永远不会淡出 这可能是代码的一个明显问题 但我似乎无法弄清楚 div div div div

  • 从 Node.js 调用 execl、execle、execlp、execv、execvP 或 execvp 的方法

    POSIX 系统公开了一系列exec函数 允许人们将可能不同的东西加载到当前进程中 保留打开的文件描述符 进程标识符等 可以出于多种原因执行此操作 在我的情况下 这是引导 我想更改我自己的进程的命令行选项 然后在现有进程上重新加载它 这样就

  • 在 Oracle 中使用触发器记录对表的更改

    我的一门课有一个项目 当我们的两个表发生更改时 我们需要创建一个日志 插入 更新 删除 我们需要使用Oracle触发器和PL SQL 在日志文件中 我们需要记录用户ID 日期时间 IP地址和事件 插入 更新 删除 我知道如何设置触发器 但我

随机推荐

热门标签