有时候我们在前台需要对序号进行处理，我们需要将JS变量写到页面中进行显示。

　　第一种方式:后台处理

　　第二种方式:JS中定义全局变量，然后进行显示，可以书写一个JS函数对不同的需要进行不同的替换，也就可以根据不同的序号显示不同的内容。如果是ajax请求数据后拼接的页面可以直接调用函数返回值进行拼接(或者在循环中利用遍历的次数 i )。

思路:

　　定义一个JS全局变量，然后在JS中书写改变变量的方法，可以在每次调用函数的时候改变变量的值。可以结合 document.write();向HTML页面中书写变量

例如:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.11.js"></script>

    <script>

        var bigNum = 1;//全局变量

        //修改全局变量的值

        function replace(num) {

            if (num == 1) {

                return "一";

            }

            if (num == 2) {

                return "二";

            }

            if (num == 3) {

                return "三";

            }

        }

    </script>

</head>

<body>

//书写全局变量

<script>

    document.write(replace(bigNum++));

</script>

<br/>

<script>

    document.write(replace(bigNum++));

</script>

<br/>

<script>

    document.write(replace(bigNum++));

</script>

</body>

</html>

结果:

第三种:(重要)

用一个带指定class属性的span包住，根据span出现的顺序设置顺序。

<span class="bigNum"></span>

JS方法:(i从0开始，代表遍历序号)

/**

 * 大题顺序

 */

function replaceBigNum(){

	$(".bigNum").each(function(i){

		if(i==0){

			$(this).text("一");

		}

		if(i==1){

			$(this).text("二");

		}

		if(i==3){

			$(this).text("三");

		}

	})

}

JS变量写到HTML页面中并修改变量值(前台处理数据序号问题)的更多相关文章

  1. JS(基础)_总结获取页面中元素和节点的方式

    一.前言 1.元素和节点的区别 2.总结获取元素的方式 3.总结获取节点的方式 二.主要内容 1.结点和元素的区别 (1)一些常见基本概念: 文档:document 元素:页面中所有的标签 结点:页面 ...

  2. HTML、jsp页面中radio，checkbox，select数据回显功能，默认被选中问题

    最近常常遇到各种复选框.单选框.下拉框的默认被选中的问题,开始也是绞尽脑汁的想办法,今天写一篇学习总结的博文来写一下学习总结. 单选框(radio)默认被选中: 一.jstl技术进行回显 <in ...

  3. 修改JS文件不能及时在页面中体现，需重启浏览器？

    对JS文件做个小小的改动,哪怕是加一句简单的ALERT语句,都要重启浏览器才能看到.你有这样的烦恼吗?怎样不用重启浏览器就能及时体现JS的变化呢? 对浏览器(IE)做如下设置即可:1.点击 工具栏 - ...

  4. C# 与 JS 之间传值在 cshtml页面中

    @{ string It = "sss"; ; } @functions{ string Mod = "ajssaioi"; public string Itm ...

  5. IOS HTML5页面中数字自动变蓝并识别为手机号

    开发HTML5的项目时发现页面元素为一串数字时,IOS手机会默认显示成蓝色字体,并且添加下划线,点击数字时会提示是否识别为手机号. 解决此问题的方法很简单,在head标签中添加下面的meta标记即可解 ...

  6. 不同页面获取同一cookie变量值不同的问题及解决方法

    在使用cookie时发现不同页面获取到的同一个cookie变量的值不同,本篇博客介绍其中一种情况的解决方法,通过设置path的方法可使得在同一个网站下获取的cookie变量一致. 问题描述 在www. ...

  7. eclipse打断点调试进入到class文件中,不显示变量值的解决办法汇总

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 问题描述:eclipse打断点调试进入到class文件中,而且监视区不显示变量结果 是由于对应 ...

  8. springboot（整合多数据源demo，aop，定时任务，异步方法调用，以及获取properties中自定义的变量值）

    有这么一个需求 每个部门,需要操作的数据库不同,A部门要将数据放test数据库,B 部门数据 要放在test1数据库 同一个项目 需要整合 多个数据源 上传个demo 方便自己以后回看!!!!!!!! ...

  9. 页面中引入js的几种方法

    通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...

随机推荐

  1. 第一次提交代码到github时经常遇到的问题

    最近两年在OpenStack方面做了一些工作,写了一些实验性的plugin. 本着Open Source的共享精神,想尝试提交到github,以便他人能下载使用. 当你注册完github帐号之后,点击 ...

  2. Selenium私房菜系列--总章

    前言 在这段期间,我一直在找关于服务器的端测试方案,自动化工具等等,无意间我发现了Selenium这个工具.在试用一段时间后,觉得Selenium确实是一个很不错的Web测试工具.在和强大的QTP比较 ...

  3. FPGA编程技巧系列之按键边沿检测

    抖动的产生: 通常的按键所用开关为机械弹性开关,当机械触点断开.闭合时,由于机械触点的弹性作用,一个按键开关在闭合时不会马上稳定地接通,在断开时也不会一下子断开.因而在闭合及断开的瞬间均伴随有一连串的 ...

  4. SEO 第一章

    SEO  第一章 第一章:SEO基础知识 第二章:搜索引擎基础 第三章:关键词分析 第四章:TDK优化 第五章:网站的URL优化 第六章:网站的内链优化 第七章:代码优化 第八章:网站的内容优化 第九 ...

  5. leetcode_1039. Minimum Score Triangulation of Polygon_动态规划

    https://leetcode.com/problems/minimum-score-triangulation-of-polygon/ 题意:给定一个凸的N边形(N<=50),每个顶点有一个 ...

  6. 区间DP || HDU 6249 Alice’s Stamps

    题意:标号为1-n的n种邮票,m个邮票集,每个集里有标号从Li到Ri的邮票,要从中选K个邮票集,使这K个邮票集能覆盖最多种的邮票,问最多能覆盖多少种邮票 思路:区间DP (我:??? f[i][j]表 ...

  7. Microsoft Windows Server DHCP

    Microsoft Windows Server DHCP DHCP IP地址第一个来源是DHCP服务器,第二个来源是PPP点对点协议(ADSL为PPPOE);DHCP是Dynamic Host Co ...

  8. 任务五：零基础HTML及CSS编码（二）

    面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

  9. CentOS7.4搭建kafka单结点和集群

    操作系统选择 CentOS7.4x86-64(操作系统的x86_64是跟CPU有关的,最早AMD公司开发出了一款向下兼容x86CPU,向上又扩充了指令集,具有了64位CPU的特性,这款CPU后来改名为 ...

  10. [模板] Miller-Rabin 素数测试

    细节挺多的.. #include<iostream> #include<cstdlib> #include<cstdio> #include<ctime> ...