IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> PHP知识库 -> 【php读取html模板并向js传输数据实现JS翻页显示】 -> 正文阅读

[PHP知识库]【php读取html模板并向js传输数据实现JS翻页显示】

<!-- html模板:1.html -->
序号<id>
<table width=50% border=1 cellspacing=0 cellpadding=2>
<tr><td>姓名</td><td><name></td><td>性别</td><td><sex></td></tr>
<tr><td>年龄</td><td><age></td><td>地址</td><td><addr></td></tr>
</table>
<?php
//php读取html模板并向js传输数据实现JS翻页显示
header('Content-Type:text/html;charset=utf-8');
?>
<html>
<title>测试</title>
<body>
<center>
<font color=red><h1>php读取html模板并向js传输数据实现JS翻页显示</h1></font><hr>
<?php
/*数组数据,下标1开始*/
$arr = array(
	1=>array('id'=>'11','name'=>'AA','sex'=>'M', 'age'=>'23', 'addr'=>'66号'),
	array('id'=>'22','name'=>'BB','sex'=>'F', 'age'=>'22', 'addr'=>'77号'),
	array('id'=>'33','name'=>'CC','sex'=>'M', 'age'=>'24', 'addr'=>'88号')
	);

/*html模板*/
$str = file_get_contents('1.html');
/*模板替换值*/
foreach($arr as $rowk => $arr2){
	foreach($arr2 as $k=>$v){
		if($k=='id') $v=$rowk;
		$str = str_replace('<'.$k.'>','<span id=id_'.$k.'>'.$v.'</span>',$str);
	}
}
/*显示html页面*/
echo $str;

/*js操作:数组数据先转为json字符串传输,再转置json数据结构*/
$js_str=json_encode($arr);
echo "<script>
	var js_arr=JSON.parse('$js_str');
	console.table(js_arr);
	var arr_length = count(js_arr);
	var i=1;
	function up_disp(){
		i--;
		if(i<1) i=1;
		//console.table(arr_length,i);
		console.log(js_arr[i]['name'],js_arr[i]['sex'],js_arr[i]['age'],js_arr[i]['addr']);
		rec_disp(i);
	}
	function down_disp(){
		i++;
		if(i>arr_length) i=arr_length;
		console.log(js_arr[i]['name'],js_arr[i]['sex'],js_arr[i]['age'],js_arr[i]['addr']);
		rec_disp(i);
		
	}
	function rec_disp(i){
		//chrome
		document.querySelector('#id_num').innerText='[共'+arr_length+'条,当前第'+i+'条]';
		document.querySelector('#id_id').innerText=i;
		document.querySelector('#id_name').innerText=js_arr[i]['name'];
		document.querySelector('#id_sex').innerText=js_arr[i]['sex'];
		document.querySelector('#id_age').innerText=js_arr[i]['age'];
		document.querySelector('#id_addr').innerText=js_arr[i]['addr'];
	}
	function count(o){
		var n = 0;
		for(var i in o) n++;
		return n;
	}
	</script>";
echo "<span id=id_num>",'[共',count($arr),'条,当前第',$rowk,'条]',"</span> ";
echo "<input type=button value='上一条' onclick=\"up_disp();\"> ";
echo "<input type=button value='下一条' onclick=\"down_disp();\"> ";
?>
</center>
</html>

  PHP知识库 最新文章
Laravel 下实现 Google 2fa 验证
UUCTF WP
DASCTF10月 web
XAMPP任意命令执行提升权限漏洞(CVE-2020-
[GYCTF2020]Easyphp
iwebsec靶场 代码执行关卡通关笔记
多个线程同步执行,多个线程依次执行,多个
php 没事记录下常用方法 (TP5.1)
php之jwt
2021-09-18
上一篇文章      下一篇文章      查看所有文章
加:2022-01-24 10:36:11  更:2022-01-24 10:37:34 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/14 14:35:04-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码