php 如何将数据库中的数据以表格的形式打印到html页面

需要两个页面:显示表格的html页面index.html(页面内包含js),进行后台处理的php页面index.php

html页面部分:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
//首先要引入jquery
<script type="text/javascript" src="../../jquery-3.2.1.min.js"></script>
//然后引入本页面js
<script type="text/javascript" src="js/index.js"></script>
</head>

<body>
<table id="tab"></table>
</body>
</html>

php页面部分:

<?php
//连接数据库
$db=new MySQLi(‘localhost‘,‘root‘,‘root‘,‘database‘);
!mysqli_connect_error() or die(‘连接失败‘);
$db->query(‘set names utf8‘);
//写sql命令语句
$sql="select * from table";
//执行sql命令
$res=$db->query($sql);
//将提出的数据转换成数组
$attr=$res->fetch_all();
//执行方法,把数组转换成字符串,并输出
echo ArrToStr($attr);

//方法:数组转字符串
function ArrToStr($arr){
    $brr=array();
//将每个字符用“,”和“^”隔开
    foreach($arr as $v){
        $brr[]=implode(‘,‘,$v);
    }
    return implode(‘^‘,$brr);
}
?>

js部分:

var tabData="";//定义一个空变量用来存放数据
//ajax获取数据
$.ajax({
        async:false,
        url:‘index.php‘,
        data:{},
        type:‘get‘,
        dataType:‘text‘,
        success:function(data){
        tabData=data;
        }
});
//页面加载完成后执行
$(function(){
//初始化变量
    initVar();
//请求数据,并执行方法将字符串转换成数组
    StrToArr(tabData);
})
//方法:初始化变量
function initVar(){
    tabDom=$(‘#tab‘);
}
//方法:字符串转数组
function StrToArr(str){
//将在php里加的“,”和“^”去掉,并转成数组
    var arr=str.split(‘^‘);
    var brr=[];
    for(var i in arr){
        brr.push(arr[i].split(‘,‘));
    }
//调用方法:打印表格
    initHtml(brr);
}
//方法:打印表格
function initHtml(arr){    
    for(var i in arr){
        str+=`<tr>`;
        for(var j in arr[i]){
            str+=`<td>`+arr[i][j]+`</td>`;
        }
        str+=`</tr>`;
    }
    $(‘#tab‘).html(str);
}

为什么要将php提出的数据转换成字符串,ajax接受后再将字符串转换成数组?
因为此处ajax接受的数据类型为“text”,所以必须经过这一步

原文地址:https://www.cnblogs.com/xwenbin/p/10223638.html

时间: 2024-10-04 04:20:16

php 如何将数据库中的数据以表格的形式打印到html页面的相关文章

将数据库中的元素以表格的形式输出(有源代码)

一共有两个类:一个数据库的,一个测试的. package com.test.table; import java.awt.Color; import javax.swing.BorderFactory;import javax.swing.JFrame;import javax.swing.JScrollPane;import javax.swing.JTable;import javax.swing.table.DefaultTableModel; /** * table的创建 *  * @a

Java实现Excel导入数据库,数据库中的数据导入到Excel

实现的功能: Java实现Excel导入数据库,如果存在就更新 数据库中的数据导入到Excel 1.添加jxl.jar mysql-connector-java.1.7-bin.jar包到项目的lib目录下­ 2.Excel文件目录:D://book.xls 3.数据库名:javenforexcel 4.表名:stu 5.编写类:连接mysql的字符串方法.插入的方法.实体类­­ 表结构如下 : 连接数据库的工具类 package com.javen.db; import java.sql.Co

java更改数据库中的数据

不废话,上代码 1 package com.ningmeng; 2 3 import java.sql.*; 4 5 /** 6 * 1:更改数据库中的数据 7 * @author biexiansheng 8 * 9 */ 10 public class Test04 { 11 12 public static void main(String[] args) { 13 // TODO Auto-generated method stub 14 try { 15 Class.forName("

用PHP向数据库中添加数据

显示页面(用户可见) <body><form action="chuli.php" method="post">  //将该页面接收的数据,交给chuli页面来处理<div>民族代号:<input type="text" name="code" /></div>       //创建一个div,放入接收器来接收code值<div>民族名称:<inpu

Sliverlight linq中的数组筛选数据库中的数据

首先 什么是linq呢 ? LINQ即Language Integrated Query(语言集成查询),LINQ是集成到C#和Visual Basic.NET这些语言中用于提供查询数据能力的一个新特性. 它是.NET框架的扩展,它允许我们以数据库查询的方式查询数据集合. 借助于LINQ技术,我们可以使用一种类似SQL的语法来查询任何形式的数据. 接下来讲讲我工作中用到的 linq中的数组筛选数据库中的数据 public List GetList1(string cardPhone,string

是用JDBC从数据库中获取数据并以java对象返回

/** * * @param c * for example Person.class * @param primaryKeys * primaryKeys为主键,参数顺序和表中保持一致 如果id, name 为主键 类名为Person 则 getEntity(Person.class,1,"name") * @return */ public static Object getEntity(Class c, Object... primaryKeys) { PreparedState

Eclipse中java向数据库中添加数据

前面详细写过如何连接数据库的具体操作,下面介绍向数据库中添加数据. 注意事项:如果参考下面代码,需要 改包名,数据库名,数据库账号,密码,和数据表(数据表里面的信息) 1 package com.ningmeng; 2 3 import java.sql.*; 4 5 /** 6 * 1:向数据库中添加数据 7 * @author biexiansheng 8 * 9 */ 10 public class Test01 { 11 12 public static void main(String

用java向mysql数据库中插入数据为空

利用java面向对像编程,向数据库中插入数据时.遇到插入的数据为空的情况.在此做一小结: 1.数据库连接正正常 2.sql语句没有问题 3.程序没有报异常 4.代码: import java.util.Scanner; import org.junit.Test;public class JDBCTest { //2).在测试方法testAAddStudent()中 //1.获取从控制台输入的Student对象:Student student=getStudentFromConsole(); /

android 如何从服务器端的数据库中拿数据,在客户端显示类?

============问题描述============ android 如何从服务器端的数据库中拿数据,在客户端显示类? ============解决方案1============ 写一个网络访问的api,Android通过API取到数据, ============解决方案2============ 有種WebService的方法可以將資料用xml格式傳送取得 ============解决方案3============ 为神马要直接访问数据库呢 叫服务端给你开放几个接口不就行了么- - ===