投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

JavaScript动态更新HTML表格日期：从相对时间到ISO时间戳

程序猿 • • 好文分享 • 阅读 0

JavaScript动态更新HTML表格日期：从相对时间到ISO时间戳

本教程将指导您如何使用javascript，从html元素的`data`属性中提取隐藏的iso格式时间戳，并将其替换掉当前显示的相对日期字符串（如“x个月y天前”）。通过分析html结构、利用dom操作方法，我们将实现表格日期显示的动态更新，提升用户对时间信息的直观理解。

在许多Web应用程序中，为了提供更友好的用户体验，日期和时间常常以相对形式（例如“2个月前”、“5天前”）显示。然而，在某些场景下，用户可能需要查看精确的绝对时间戳（如2021-12-17T06:32:13Z）。幸运的是，开发者通常会将这些精确的时间信息存储在HTML元素的自定义data属性中，以便于前端脚本访问。本教程将详细介绍如何通过JavaScript实现这一转换。

识别目标HTML结构

首先，我们需要了解目标HTML元素的结构。通常，相对日期会显示在一个表格单元格（

）中，而精确的时间戳则存储在该单元格的data属性里。以下是一个典型的HTML片段示例：

   9 mo 10 days -    #2170

在这个例子中：

元素显示了文本 ” 9 mo 10 days -“。同一个 元素含有一个 data 属性，其值为 “2021-12-17T06:32:13Z”，这正是我们想要显示的时间戳。 内部还包含一个 标签，我们需要确保在替换文本时不会影响到它。

使用JavaScript进行日期转换

要实现日期转换，我们需要执行以下步骤：

立即学习“Java免费学习笔记（深入）”；

选中目标元素： 使用DOM选择器找到包含日期信息的 元素。获取时间戳： 从选中的 元素的 data 属性中读取精确的时间戳。更新显示文本： 将 元素内部的文本内容替换为获取到的时间戳。

以下是实现这一功能的JavaScript代码：

/** * 替换指定单元格内的相对日期显示为data属性中的ISO时间戳。 * 假定目标单元格的第一个文本节点是需要替换的内容。 */function replaceTimestamp() {  // 1. 选中目标元素  // 这里使用 document.querySelector('td') 选取页面上第一个元素。  // 在实际应用中，建议使用更具体的选择器，如ID或类名，以确保选中正确的元素。  let cell = document.querySelector('td');  // 检查是否成功选中了元素  if (cell) {    // 2. 获取时间戳    const timestamp = cell.getAttribute('data');    // 3. 更新显示文本    // cell.firstChild.data 指的是元素内的第一个子节点（通常是文本节点）的数据。    // 这样做可以避免影响到内部的其他子元素（如标签）。    if (cell.firstChild && cell.firstChild.nodeType === Node.TEXT_NODE) {      cell.firstChild.data = timestamp + ' - ';    } else {      // 如果第一个子节点不是文本节点，或者不存在，则直接设置textContent      // 这会覆盖内部的所有内容，包括标签，需谨慎使用。      // cell.textContent = timestamp + ' - ';      console.warn("单元格的第一个子节点不是文本节点，可能无法精确替换。");    }  } else {    console.error("未找到目标元素。");  }}

完整示例

为了更好地演示，我们可以创建一个包含上述HTML结构和JavaScript功能的完整页面。用户可以通过点击按钮来触发日期转换。

      动态更新表格日期      table {      border-collapse: collapse;      width: 100%;      margin-bottom: 20px;    }    th, td {      border: 1px solid #ddd;      padding: 8px;      text-align: left;    }    th {      background-color: #f2f2f2;    }    button {      padding: 10px 15px;      font-size: 16px;      cursor: pointer;    }    
表格日期显示转换示例
  
          
        任务ID        最后构建时间      
              
        #2170         9 mo 10 days -          查看详情              
      
        #2171         2 年 3 个月前 -          查看详情              
      
        /**     * 替换所有带有data属性的单元格内的相对日期显示为ISO时间戳。     */    function replaceTimestampForAll() {      // 选中所有带有data属性的元素      let cells = document.querySelectorAll('td[data]');      cells.forEach(cell => {        const timestamp = cell.getAttribute('data');        if (cell.firstChild && cell.firstChild.nodeType === Node.TEXT_NODE) {          cell.firstChild.data = timestamp + ' - ';        } else {          // 备用方案，如果第一个子节点不是文本节点，直接设置textContent          // 这会覆盖内部的所有内容，包括标签，需谨慎使用。          // cell.textContent = timestamp + ' - ';          console.warn("单元格的第一个子节点不是文本节点，可能无法精确替换。", cell);        }      });    }    // 页面加载完成后自动执行一次转换（可选）    // window.onload = replaceTimestampForAll;

在上面的完整示例中，我们修改了replaceTimestamp函数为replaceTimestampForAll，使其能够遍历所有带有data属性的

元素，并对它们进行批量处理。这在实际应用中更为常见。

注意事项与最佳实践

选择器的精确性： 在生产环境中，document.querySelector(‘td’) 过于宽泛。应使用更具体的选择器，如 document.getElementById(‘your-table-id’).querySelector(‘td[data]’) 或 document.querySelectorAll(‘.last-build-column[data]’)，以确保只修改目标元素。处理多个元素： 如果页面上有多个需要转换的日期，应使用 document.querySelectorAll() 获取所有匹配的元素，然后通过循环（如 forEach）逐一处理。文本节点操作： 使用 element.firstChild.data 是一个精确的修改文本节点的方法，它不会影响到元素内部的其他子标签（如 链接）。如果直接使用 element.textContent = …，则会覆盖元素内部的所有HTML内容，包括子标签，这通常不是我们希望的结果。动态加载内容： 如果表格内容是通过AJAX或其他方式动态加载的，您需要在内容加载完成后再调用此函数，或者使用MutationObserver来监听DOM变化。错误处理： 在代码中加入对元素是否存在的检查（如 if (cell)），可以提高代码的健壮性，避免在元素不存在时引发错误。

总结

通过本教程，我们学习了如何利用JavaScript从HTML元素的data属性中提取隐藏的时间戳，并将其替换掉页面上显示的相对日期。这种技术不仅能够提升用户体验，提供更精确的信息，而且通过精确的DOM操作，确保了页面其他内容的完整性。掌握这种方法，您将能够更灵活地控制Web页面上日期和时间的显示方式。

以上就是JavaScript动态更新HTML表格日期：从相对时间到ISO时间戳的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598770.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

414.1K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月23日 13:13:05
下一篇 2025年12月23日 13:13:20

相关推荐

  • 如何利用JS脚本在浏览器中获取IP地址和地理位置信息？ 好文分享

    如何利用JS脚本在浏览器中获取IP地址和地理位置信息？

    如何在浏览器中获取ip地理位置信息 要获取ip地址和地理位置信息，可以利用http://ip.tanwan.com/index.php?action=ipinfo&format=js提供的js脚本，但该脚本请求类型为文档，并不适用于ajax请求。 解决方法：像cdn一样引入脚本 一种可行的解…

    程序猿的头像 程序猿
    2025年12月24日
    100
  • 如何使用Ajax从远程JS文件获取IP信息并展示在HTML元素中？ 好文分享

    如何使用Ajax从远程JS文件获取IP信息并展示在HTML元素中？

    如何利用ajax获取远程数据并赋值给html元素？ 你提供的url是一个js文件，其中包含了ip信息。虽然该文件可以通过ajax获取，但需要注意的是，对于document类型的请求是无法使用ajax的。因此，通常会采取类似cdn引入的方式来获取这类数据。 代码演示： 在html文件中加入必要的脚本引…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 为什么CSS中多个类选择器声明时，最后声明的样式会覆盖前面的样式？ 好文分享

    为什么CSS中多个类选择器声明时，最后声明的样式会覆盖前面的样式？

    探究类选择器样式的覆盖规则 给定如下html和css代码： html： 展示的内容立即学习“前端免费学习笔记（深入）”； css： .a1 { color: red;}.a2 { color: green;}.a3 { color: blue;} 元素的文本显示为蓝色，这是为什么？ 答案： 由于cs…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 如何用 style.css 覆盖页面中的内联样式？ 好文分享

    如何用 style.css 覆盖页面中的内联样式？

    样式覆盖：在 style.css 中覆盖内联样式 对于css样式覆盖的问题，您提到无法在style.css中使用max-width覆盖页面中的.goods_dialog样式，即使加了!important，这确实是一个常见的问题。 解决方法是增加css选择器的权重。权重是css选择器的一个属性，它决定…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 如何使用 CSS clip-path 在长方形中创建直角梯形？ 好文分享

    如何使用 CSS clip-path 在长方形中创建直角梯形？

    长方形中实现直接梯形，利用clip-path一招搞定 如何在长方形中实现一个直接梯形，这个问题让许多开发者伤透脑筋。不过，利用css的clip-path属性，就可以轻松解决。 clip-path属性可以让我们使用多边形（polygon）来裁剪元素的形状。在我们的例子中，我们将使用以下多边形来创建一个…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • offsetWidth 为什么出错了？ 好文分享

    offsetWidth 为什么出错了？

    offsetWidth为何报错？ 在网页中，您希望获取offsetWidth值，却无故报错。 问题根源： 使用offsetWidth时，需要确保元素具有可见的宽度。 解决方案： 根据您提供的代码片段，您试图获取一个带有focus类名的元素的offsetWidth。以下是可能导致问题的两个原因： 您使…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • CSS（层叠样式表）：网页的样式和布局 好文分享

    CSS（层叠样式表）：网页的样式和布局

    css（层叠样式表）是使网页具有视觉吸引力的重要工具。 html（超文本标记语言） 提供网页的结构和内容，而 css 负责设计、布局和整体呈现。 css 允许开发人员控制网站的外观和感觉，从颜色和字体到间距和布局，确保用户体验既具有视觉吸引力，又在不同设备上保持一致。 本文将介绍 css 的基础知识…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • HTML/CSS 课程 - 课程或年级 好文分享

    HTML/CSS 课程 – 课程或年级

    html/css 课程 – 第 1 课细分 第 1 课：基本 html 回顾和高级 html 元素简介 目标： 刷新基础 html 标签。引入中级html元素来构建更多功能性网页。 1。 html结构简介 首先简要说明 html 如何使用标签组织网页内容。强调html（超文本标记语言）用…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • css伪类选择器怎么用 好文分享

    css伪类选择器怎么用

    CSS伪类选择器是一种选择特定状态或行为元素的特殊选择器，使用element:pseudo-class语法，常见伪类包括：hover（悬停）、active（激活）、focus（焦点）、link（链接）和visited（访问过）。可用于为元素悬停、激活、获得焦点、链接和访问时应用样式，例如为按钮悬停时…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • div在css中是什么意思 好文分享

    div在css中是什么意思

    在CSS中，DIV表示一个块级元素，用于创建可通过CSS样式化的容器，包含任何类型的HTML内容，并可用于组织、分组，并通过CSS灵活布局，并可添加语义信息。与SPAN不同，DIV是块级元素用于创建容器，而SPAN是内联元素用于样式化文本。 DIV在CSS中的含义 在层叠样式表（CSS）中，DIV是…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • ridge在css中是什么意思 好文分享

    ridge在css中是什么意思

    ridge是CSS中的边框样式，用于创建具有浮雕效果的3D边框，具体表现为一条凸起的山脊状线条。 什么是ridge？ ridge是CSS中的一种边框样式，用于创建具有浮雕效果的3D边框。 ridge样式的具体效果 ridge样式的边框呈现为一条凸起的、类似于山脊的线条。在较新的浏览器上，ridge样…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • css样式表里优先级别最高的是哪个 好文分享

    css样式表里优先级别最高的是哪个

    CSS样式表中优先级最高的样式是内联样式，它直接嵌入到HTML元素中，作用于特定的元素。其语法为文本，并高于嵌入式样式和外部样式。 CSS样式表中优先级最高的样式 CSS样式表中优先级最高的样式是内联样式。 内联样式直接嵌入到HTML元素中，使用style属性。由于它作用于特定的元素，因此优先级高于…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • css样式写在哪个位置 好文分享

    css样式写在哪个位置

    CSS样式可写入以下三个位置：行内样式：直接写入HTML元素的style属性中。内部样式表：在标签内的元素中编写。外部样式表：写在单独的.css文件中，并通过标签链接到HTML页面。通常，根据具体情况选择最合适的样式写入位置。 CSS样式写入位置 CSS（Cascading Style Sheets…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • css选择器优先级最高的是什么 好文分享

    css选择器优先级最高的是什么

    CSS 选择器优先级最高的是内联样式，它直接写在 HTML 元素的 style 属性中，具有最高的优先级，其他优先级依次为：ID 选择器、类选择器、元素选择器、通配符选择器。 CSS选择器优先级最高的是什么？ 在CSS中，选择器优先级决定了哪些样式规则将被应用到元素上。优先级最高的规则将覆盖优先级较…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 常见的CSS3选择器有哪些？ 好文分享

    常见的CSS3选择器有哪些？

    CSS3是一种用于网页设计的样式表语言，它具有丰富的选择器，这些选择器可以帮助我们更精确地指定要样式化的HTML元素。下面将介绍一些常用的CSS3选择器，并给出相应的代码示例。 元素选择器（Element Selector）元素选择器是最基本的选择器，可以选择HTML文档中的特定元素进行样式化。例如…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 使用CSS Transform进行元素的变换 好文分享

    使用CSS Transform进行元素的变换

    CSS中Transform的用法 CSS的Transform属性是一种非常强大的工具，可以对HTML元素进行平移、旋转、缩放和倾斜等操作。它可以极大地改变元素的外观，使网页更富有创意和动感。在本文中，我们将详细介绍Transform的各种用法，并提供具体的代码示例。 一、平移（Translate） …

    程序猿的头像 程序猿
    2025年12月24日
    000
  • CSS样式无法正常显示的解决方式 好文分享

    CSS样式无法正常显示的解决方式

    CSS显示不出来怎么办，需要具体代码示例 CSS（层叠样式表）是一种用于描述网页元素样式的标记语言，通过设定不同的样式规则，可以控制网页的布局、颜色、字体等外观效果。然而，有时候我们会遇到CSS显示不出来的问题，导致网页无法正常呈现所设定的样式。本文将介绍一些常见的CSS显示问题，并提供具体的代码示…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • css的尺寸单位有哪些 好文分享

    css的尺寸单位有哪些

    CSS的尺寸单位有很多种，每种单位都有其适用的场景和用途。下面将详细介绍常用的CSS尺寸单位，并提供相应的代码示例。 像素（px）像素是最常用的尺寸单位之一。它是相对于屏幕的物理像素来进行度量的，具有固定的大小。在书写CSS样式时，可以直接使用像素作为宽度、高度、边框、内外边距等属性的值。例如： d…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • css层叠样式表的三种应用方式是什么 好文分享

    css层叠样式表的三种应用方式是什么

    CSS层叠样式表是一种用于控制网页样式和布局的语言，具有广泛的应用。在CSS中，有三种应用方式，分别是内联样式、内部样式和外部样式。下面将为您详细介绍这三种应用方式，并附上具体的代码示例。 内联样式（Inline Style）：内联样式是将CSS样式直接写在HTML元素的style属性中。这种方式的…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • css中hover怎么使用 好文分享

    css中hover怎么使用

    CSS中的hover伪类是一个非常常用的选择器，它允许我们在鼠标悬停在元素上时改变其样式。本文将为大家介绍hover的用法，并提供具体的代码示例。 一、基本用法要使用hover，我们需要先为该元素定义一个样式，然后使用:hover伪类来制定鼠标悬停时对应的样式。例如，我们有一个button元素，当鼠…

    程序猿的头像 程序猿
    2025年12月24日
    000

发表回复

登录后才能评论
关注微信