开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用jquery (或vanilla JS)在页面加载上格式表中的数字

使用jQuery或原生JavaScript在页面加载时格式化表中的数字，可以通过以下步骤实现：

首先，确保在页面中引入jQuery库或使用原生JavaScript。
在HTML中，创建一个表格，并为每个需要格式化的数字添加一个特定的类名或ID。
使用jQuery的.ready()方法或原生JavaScript的DOMContentLoaded事件监听器，确保在页面加载完成后执行以下代码。
使用jQuery的选择器或原生JavaScript的getElementById()方法获取表格中的数字元素。
遍历获取到的数字元素列表，对每个元素进行格式化操作。
- 如果使用jQuery，可以使用.each()方法遍历元素列表，并使用jQuery的text()方法获取和设置元素的文本内容。
- 如果使用原生JavaScript，可以使用for循环遍历元素列表，并使用innerHTML属性获取和设置元素的文本内容。

在格式化操作中，可以使用JavaScript内置的Intl对象提供的NumberFormat API来格式化数字。该API支持多种格式化选项，例如指定小数位数、千位分隔符等。
格式化完成后，将格式化后的数字重新设置为元素的文本内容。

以下是一个使用jQuery实现的示例代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
    }
    td {
      border: 1px solid black;
      padding: 5px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td class="number">1000</td>
      <td class="number">2000</td>
      <td class="number">3000</td>
    </tr>
  </table>

  <script>
    $(document).ready(function() {
      $('.number').each(function() {
        var number = parseFloat($(this).text());
        var formattedNumber = new Intl.NumberFormat().format(number);
        $(this).text(formattedNumber);
      });
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个包含数字的表格，并为每个数字单元格添加了类名"number"。在页面加载完成后，使用jQuery的.each()方法遍历所有类名为"number"的元素，将其文本内容解析为浮点数，并使用Intl.NumberFormat API格式化数字。最后，将格式化后的数字重新设置为元素的文本内容。

请注意，上述示例仅使用了jQuery库来简化DOM操作和事件处理。如果您更倾向于使用原生JavaScript，可以使用类似的逻辑来实现相同的效果。

相关搜索:如何使用Next.js访问当前在导航上加载的url或页面使用JS或JQUERY在页面加载时选择第一个html表格行通过使用js/jquery重新加载页面来修改url中的参数外部js脚本在使用jQuery加载的页面上不起作用 Php/Jquery/Ajax:在Accordian Click上，它在Accordian中加载页面中的内容如何使用appscript从google工作表中读取数字，并希望使用另一个工作表上的格式的数字。“如何使用jquery在索引方法上加载laravel中show方法的内容如何使用jquery在索引方法上加载laravel中show方法的内容？在使用Tabs时，有没有办法在页面加载之前隐藏JQuery中的内容？在PIXI.JS中从精灵工作表加载图像时，精灵工作表的顺序或数量重要吗？使用javascript或jquery在一个页面中插入多个广告的有效方法是什么？在jquery或javascript中，有没有一种方法可以在页面加载时填充下拉列表，而不使用ajax请求？使用js/jquery在ruby on rails中隐藏form_tag上的提交按钮如何使用JS ES6和jQuery将本地存储中的特定数据加载到新页面？使用Vapor3后端和叶页面在editor.js中重新加载保存的数据如何获取用户输入的值，然后使用moment.js将其转换为javascript或jquery中的HH:MM格式？如何在页面加载时使用JS或jQuery将纯文本替换为特定值，替换为相同的文本但其周围的<font>标记在html/css页面上使用python和BeautifulSoup时，访问表中没有ID或类的<td>元素我应该避免在样式表中定义的CSS类上使用jQuery选择器吗？我是否可以在CSS中的div上裁剪蒙版文本(使用或不使用JS的帮助)？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery

jQuery本质上就是一个外部的js文件(jQuery.js)，该文件中封装了很多js代码,实现了很多功能。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more。 (写的更少,做的更多)。

02

【JQuery】JQuery入门——知识点讲解(一)

jQuery 是一个 JavaScript 框架。底层封装了大量 JavaScript 代码。

01

Github 移除 JQuery 的过程

我们最近完成了一个里程碑，我们可以将jQuery作为GitHub.com前端代码的依赖项删除。这标志着一个渐进的、长达数年的、与jQuery越来越脱钩的过渡的结束，直到我们能够完全删除这个库。在这篇文章中，我们将解释一点我们最初是如何开始依赖jQuery的，我们是如何意识到不再需要jQuery的，并指出我们没有用另一个库或框架替换它，而是能够使用标准的浏览器api实现所需的一切。

01

【Java 进阶篇】Java与JQuery：探秘事件绑定、入口函数与样式控制

在现代的Web开发中，Java和JQuery是两个不可或缺的角色。Java为我们提供了强大的后端支持，而JQuery则是前端开发的得力助手。本篇博客将围绕Java和JQuery，深入探讨事件绑定、入口函数和样式控制，带你进入前端开发的奇妙世界。

06

Java与JQuery：探秘事件绑定、入口函数与样式控制

在现代的Web开发中，Java和JQuery是两个不可或缺的角色。Java为我们提供了强大的后端支持，而JQuery则是前端开发的得力助手。本篇博客将围绕Java和JQuery，深入探讨事件绑定、入口函数和样式控制，带你进入前端开发的奇妙世界。

00

如何在Nuxt应用程序中加载外部脚本

我需要加载一个样式表和几个脚本。我将分享我如何使用Nuxt完成此操作以及实现此操作的不同方法。

01

Web-第四天 jQuery学习

jQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。

04

WordPress 通过模板文件和自带的函数引入 css/js 的两种方法

WordPress 引入css/js 是我们制作主题时首先面对的一个难点，任何一款主题都要加载自己的 css,js,甚至很有可能还需要加载 Jquery 文件,网上方法特多，说法不一，我们今天借鉴 wordpress 官方最新的 twentysixteen 主题来学习总结一下 WordPress 引入 css/js 各种常用方法，以及最优化的加载方法。

03

前端知识普及之页面加载

如果大家想继续看下面的内容的话，有一个要求，就是回答我一个问题: 你这样写过代码吗？ window.onload = function(){ $(".gravatar").on('click',function(){ //... }); //以及其他操作DOM的节点 } 如果答案是 yes. 那么，bingo, 这里我们将深入讲解，这样写代码到底有没有IQ。如果答案是 No. 那么，2333333, 你也可以看一下。万一哪天用上了呢？可能会有童鞋反问，那么，我

09

为什么自定义函数效验器和页面加载成功事件不能放在一起

!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script> <script type="text/javascript" src="../js/jquery.validate.js" ></script> <script type="text/javascript" src="../js/messages_zh.js" ></script> <script> // 页面加载成功之后锁定,要加载的页面对象 $(function(){ // 锁定要效验的表单对象,调用validate方法 $("#formId").validate({ rules:{ card:{ required:true, cardLength:true } }, //提示信息 messages:{ card:{ cardLength:"请输入16位到18位的数字" } } }); }); //自定义函数效验器和页面加载成功事件不能放在一起,因为页面加载成功事件也是一个函数,两个函数不能相互嵌套 $.validator.addMethod("cardLength",function(val,ele,par){ if(par) { if(val.length == 16 || val.length == 18) { return true; } return false; }else { return true; } },"输入不合法"); </script> </head> <body> <form id="formId" action=""> 必填：<input type="text" name="username" />
必填数字： <input type="text" name="password" />
必填重复： <input type="text" name="repassword" />
最小值： <input type="text" name="zuixiaozhi" />
区间： <input type="text" name="shuzhiqujian" />
身份证长度:<input type="text" name="card" />
<input type="submit" value="提交" /> </form> </body> </html>

06

WordPress建站技术笔记

启用了autoptimize来优化页面加载。其主要功能是优化压缩html，合并js和css代码，减少http请求次数，加快页面加载。但启用后就发现页面加载存在异常，console有报错信息。

02

「沙里淘金」精选浏览器端JavaScript库资源推荐

你不懂JS - 可能是用现代JavaScript编写的最好的书，完全可以免费在线阅读，或者可以买来支持作者。

02

「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

你不懂JS - 可能是用现代JavaScript编写的最好的书，完全可以免费在线阅读，或者可以买来支持作者。

02

javaWeb核心技术第五篇之jQuery

- 概述 - jQuery是一个优秀的javascript框架(js类库)，兼容css3和各大浏览器，提供dom，events，animate，ajax等简易的操作。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可

01

jQuery的使用

1.需求分析在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】

03

从GitHub.com放弃使用jQuery说起

js和物联网领域的关系不是很大，为什么要关心js呢？其实关系也不小，它主要是负责直接和用户交互的那部分，也就是前端，前端基本都是离不开js的，甚至有些CS架构的程序也用js，比如nodejs开发的客户端程序。

02

不敢相信，技术栈，居然被P站秒了

PornHub的FE，分享了P站前端一些实践，英文比较晦涩难懂，故翻译整理了一下，很多同学对前端技术不是很熟悉，故加入了简单解释，希望对大家理解相关技术有帮助。

01

jQuery页面加载完毕后执行事件

window.onload 表示的是页面被加载完毕。 onload必须等等页面中的图片、声音、图像等远程资源被加载完毕后才调用而jQuery中只需要页面结构被加载完毕。

04

hexo-theme-yun 制作笔记

还在用 WordPress 的时候，总是喜新厌旧，经常换主题。且装了一堆插件，速度慢还容易崩。而迁移到 Hexo 之后（小水管服务器太慢，拿去挂 MC 了。根本原因是没钱），光是 hexo-theme-next 的配置项，便让我花了好一番功夫。导致觉得自己不一直用下去，感到十分对不起仔细一个一个配置过来的自己。

02

【JavaWeb】84：jQuery框架

也就是昨天刚学的DOM编程，其中涉及到getElementById()方法的使用。

01

jQuery入口函数的写法

需要引入jQuery文件入口函数的标准在<head> </head>标签中，jQuery入口函数必须要写，在<body> </body>可以不写，写上入口函数后不论放在哪个标签下都能去执行。一般建议在body标签中写入口函数，就是为了等页面加载完成后才执行入口函数。案例： js的入口函数执行要比jQuery的入口函数执行得晚一些。 jquery的入口函数会等待页面的加载完成才执行，但是不会等待图片的加载。 js的入口函数会等待页面加载完成，并且等待图片加载完成才开始执行 <!DOCTYPE

03

Hexo-neat插件优化提升访问效率

对于任何一个网站来说，优化页面的访问速度是必须的，个人来说，只要加载页面十秒以上或长时间处于空白或加载状态，我会立刻关掉此页面的。你又能容忍几秒呢？

02

Validate表单验证

validate 一、 validate的使用步骤引入jquery.min.js 引入 jquery.validate.js 页面加载后对表单进行验证 $("#表单id名").validate({}）在validate中的rules中编写验证规则（格式如下）字段的name属性:“校验器”（tisps:一个输入框只有一个校验器的时候使用）字段的name属性:{校验器:值,校验器:值}(tips:输入框需要有多个校验器的时候使用) 在validate中的messages中编写提示信息(tips格

05

公司国际化笔记

国际化原因为了更加方便切换版本,让代码应该一次完成,多国使用,除了使用英语外,还要可以进行单独语言包的一个添加,文章就是这样的一个例子. 公司接到一个国外的项目,需要法文版本的,但是公司通晓法文的基本没有,于是商量降低要求之后开始国际化采用英文展示就行,于是任务就开始了. 目录 [TOC] 需求分析项目的代码全部国际化任务量不小,公司基本没有用什么框架,基本采用的是js,html实现数据的展示,没有采用框架,只是有一些简单的逻辑分层,加大了不少国际化的难度. 但是针对java部分的代码,虽说稍微熟悉一些

04

jQuery框架安装及jQuery特点介绍

jQuery框架安装及jQuery特点介绍，JQuery是一个便捷、简洁的JavaScript框架，封装了Js常用的功能代码，提供一种简便的Js设计模式，优化Html文档操作、事件处理、动画设计和Ajax交互。

01

前端基础-jQuery简介

JavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

01

从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

JavaScript 开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

04

利用jquery爬取网页数据，爽得一笔

以前我们说到爬取网页数据，你可能会第一时间想到scrapy，嗯，那个强大的python爬虫库，然而，有些时候，我们其实要爬取数据并非一定要使用这么强大【笨重】的库来实现，而且，某些时候，可能使用scrapy来爬取我们想到的数据，还比较困难。

06

如何开发跨框架的组件

笔者所在的业务中台团队，需要提供业务组件给不同的上层业务方使用，但因为一些历史遗留问题，不同业务线使用的框架不统一，包括 jQuery、React 、Vue。为了满足不同业务方的需求，往往需要根据业务方使用的框架，开发对应框架的组件。

02

如何开发跨框架的组件

笔者所在的业务中台团队，需要提供业务组件给不同的上层业务方使用，但因为一些历史遗留问题，不同业务线使用的框架不统一，包括 jQuery、React 、Vue。为了满足不同业务方的需求，往往需要根据业务方使用的框架，开发对应框架的组件。

02

【Java 进阶篇】JQuery 动画：为页面添彩的魔法

在现代的Web开发中，用户体验的提升是至关重要的一环。而动画作为页面交互中的重要组成部分，更是为用户带来了全新的感官体验。本篇博客将深入探讨 JQuery 中动画的应用，带你进入一个充满活力的前端世界。

06

JQuery 动画：为页面添彩的魔法

在现代的Web开发中，用户体验的提升是至关重要的一环。而动画作为页面交互中的重要组成部分，更是为用户带来了全新的感官体验。本篇博客将深入探讨 JQuery 中动画的应用，带你进入一个充满活力的前端世界。

01

指定 WordPress 页面按需加载 JavaScript

在 wordpress 主题或插件中加载 JavaScript 时，官方推荐的方法是使用 wp_enqueue_script() 来加载，该函数可以指定 JavaScript 的依赖库，指定 JavaScript 文件的版本，设置在页面头部或者底部加载，非常灵活和方便。但是，该插件缺少指定在某些页面加载 JavaScript 的设置参数。所幸的是，我们可以通过 WordPress 的函数自己动手来实现这个功能。

01

浅析YSlow-23条规则

本文作者：IMWeb 孙世吉原文出处：IMWeb社区未经同意，禁止转载起因起初想要去了解如何提高网页加载性能，发现Yahoo发布的一款基于FireFox的插件YSlow。本文浅谈YS

08

浅析YSlow-23条规则

起初想要去了解如何提高网页加载性能，发现Yahoo发布的一款基于FireFox的插件YSlow。

03

这五个HTML5特性你绝不可忽视

相信大家都会非常喜欢这个特性，无须服务器端的检测，使用浏览器的本地功能就可以帮助你判断电子邮件的格式，URL，或者是电话格式，防止用户输入错误的信息，通过使用HTML5的pattern属性，我们可以很方便的整合这个功能，代码如下：

02

AdminLTE介绍和zTree的简单使用

AdminLTE是一个开源的后台控制面板和仪表盘 WebApp 模板，是建立在Bootstrap3框架和JQuery之上的开源模板主题工具，它提供了一系列响应的组件，并内置了多个模板页面，包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。通过AdminLTE，我们可以快速的创建一个响应式的Html5网站。

06

给Emlog添加页面加载(加载中)特效

为了加强浏览者的体验,不在等待页面加载时感到枯燥，从而关闭网页，很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程，加载完成后提示消失，大部分都应用在网站的首页，今天我教大家把这一特效添加到Emlog主题中。要实现该特效同样要用到jquery，如果大家和我目前用的主题一样，为了实现其它特效已提前加载了jquery，那么正好充分利用jquery的强大功能，添加此特效何乐而不为呢？当然仅仅为了实现这个特效，而去加载50几K的jquery就有点得不偿失了。

02

25个常规方法优化你的jquery代码

1. 从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库，从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽，能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是，如果用户访问那些发布在Google Code上的站点后它会被缓存下来。这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本，而这些很容易做到,引入:

01

AJAX常见面试问题[通俗易懂]

cache：默认为true（当dataType为script时，默认为false）, 设置为false将不会从浏览器缓存中加载请求信息。

02

Thinkphp5框架中引入Markdown编辑器操作示例

本文实例讲述了Thinkphp5框架中引入Markdown编辑器操作。分享给大家供大家参考，具体如下：

01

【春节日更】JS延迟加载的几种方式

用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

03

提高页面的加载速度的几个小技巧[每日前端夜话0x3F]

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争，拥有一个吸引人的网站可以帮助你脱颖而出。研究表明，如果加载时间超过3秒，会有 40％的用户放弃访问你的网站（https://www.optimumsystemsonline.com/business-success/5-stats-that-will-make-you-monitor-web-performance/）。

04

HTTP协议压缩格式和URL编码介绍

HTTP压缩是指web服务器和浏览器之间压缩传输请求响应结果的方法，通过采用通用的压缩算法，将数据包压缩后进行传输，从而提升页面加载速度，给用户一个更好的体验。

01

jQuery 介绍以及基本使用

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

03

jquery日历控件假日

在Web开发中，日历控件是一个常见的组件，用于显示日期并帮助用户选择日期。jQuery日历控件是一款流行的JavaScript库，可以轻松地实现日历功能。在很多应用场景中，我们需要在日历上标识出假日，以提醒用户。本文将介绍如何结合jQuery日历控件和假日数据，实现假日在日历上的显示。

01

jquery get 参数转 json

在使用 jQuery 进行 AJAX 请求时，有时候我们需要将 GET 请求中的参数转换为 JSON 格式。这样可以更方便地处理参数，并与后端服务进行交互。本篇技术博客将介绍如何使用 jQuery 将 GET 请求参数转换为 JSON 格式。

01

Vanilla JS——最轻快的JavaScript框架

简介 Vanilla JS团队维护每个字节的代码框架,每天努力工作,以确保它是小的和直观的。使用Vanilla JS是谁?很高兴你发问!他被应用于: Facebook; Google; YouTube

04

使用神器eruda 进行移动端调试

eruda与腾讯推出的vconsole很相似，都是用于移动端的调试，让开发者在移动端的浏览器中获得近似PC端浏览器的调试能力。截止至本文发稿之日，eruda在GitHub上已经有2.7K个star

03

JavaScript资源大全中文版（Awesome最新版）

本文主要介绍了高可维护的JavaScript代码规范，包括变量命名、注释、函数、正则表达式、对象、闭包、性能、模块化、私有变量、代码格式化、测试、编码规范、工具和最佳实践等。同时，本文还提供了常见代码规范的具体示例和JavaScript代码规范检查工具的输出结果。通过遵循这些规范，可以大大提高代码的可读性和可维护性，从而提高开发效率。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭