django学习入门系列之第五点《案例 动态表格》

文章目录

  • 案例 动态表格
  • 往期回顾


案例 动态表格

  • 显示一行
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<table border="1">
    <thead>
    <tr>
        <th>
            ID
        th>
        <th>
            姓名
        th>
        <th>
            年龄
        th>
    tr>
    thead>
    <tbody id="body">
    tbody>
table>

<script type="text/javascript">
    var info = {id: 1, name: "郭志", age: 20};
    var tr = document.createElement("tr");
    for (var key in info) {
        var text = info[key];
        var td = document.createElement("td");
        td.innerText = text;
        tr.appendChild(td);
    }

    var bodyTag = document.getElementById("body");
    bodyTag.appendChild(tr);
script>

body>
html>
  • 显示多行
    • 可以使用数组嵌套的方式来做
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<table border="1">
    <thead>
    <tr>
        <th>
            ID
        th>
        <th>
            姓名
        th>
        <th>
            年龄
        th>
    tr>
    thead>
    <tbody id="body">
    tbody>
table>

    
<script type="text/javascript">
    //很多时候,这些数据都是通过网页请求获取的
    var datalist = [
        {id: 1, name: "郭志", age: 20},
        {id: 2, name: "郭志", age: 20},
        {id: 3, name: "郭志", age: 20},
        {id: 4, name: "郭志", age: 20},
        {id: 5, name: "郭志", age: 20}
    ];

    for (var idx in datalist) {
        var info = datalist[idx];
        var tr = document.createElement("tr");
        for (var key in info) {
            var text = info[key];
            var td = document.createElement("td");
            td.innerText = text;
            tr.appendChild(td);
        }
        var bodyTag = document.getElementById("body");
        bodyTag.appendChild(tr);
    }


script>

body>
html>

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1:用户注册】
7.【案例2:用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例 小米商城头标】
15.【案例 小米商城头标总结】
16.【案例 小米商城二级菜单】
17.【案例 商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例 小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】
25.【案例 博客案例】
26.【案例 登录】
27.【案例 后台管理样例】
28.【图标】
29.【BootStrap依赖】
30.【javascript初了解】
31.【jJavaScript的变量】
32.【JavaScript的字符串类型】
33.【JavaScript的数组介绍】
34.【案例 动态数据】
35.【javascript 对象(字典)】

你可能感兴趣的:(django,学习,sqlite,数据库,django,python,前端框架,前端)