动态加载表格数据(自定义)

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        tr>td{            width: 100px;            border: 1px solid red;        }    </style></head><body><ul id="boxUl"></ul><div>展示:<span id="showImessage"></span></div><button onclick="suanf(0)">加</button><button onclick="suanf(1)">减</button><table id="box">    <thead>        <tr>            <th>姓名:</th>            <th>年龄:</th>            <th>爱好:</th>            <th>运动:</th>        </tr>    </thead>    <tbody id="bodybox"></tbody></table><script src="./js/jquery-1.9.1.min.js" ></script><script>    //<!-- 动态添加数据-->var data=["1232","123we","aeds"];    var str="";    for(var i=0;i<data.length;i++){        str +="<li"+">"+data[i]+"</li"+">"    }    $("#boxUl").append(str)//点击加减1var o=0;function suanf (jia){    if(jia == "0"){        o ++;        $("#showImessage").html(o)    }else if(jia == "1"){        o --;        $("#showImessage").html(o)    }}//动态加载表格数据    var dataArry=[        {‘name‘:"张三",‘age‘:"15",‘like‘:"羽毛球",‘play‘:"运动"},        {‘name‘:"小时",‘age‘:"4",‘like‘:"足球",‘play‘:"运动"},        {‘name‘:"利达",‘age‘:"7",‘like‘:"画画",‘play‘:"运动"},        {‘name‘:"吴家",‘age‘:"21",‘like‘:"乒乓球",‘play‘:"运动"}    ];       for(var s =0;s<dataArry.length;s ++){           var $trTemp = $("<tr></tr>");           $trTemp.append("<td"+">"+(dataArry[s].name) +"</td"+">");           $trTemp.append("<td"+">"+ (dataArry[s].age) +"</td"+">");           $trTemp.append("<td"+">"+ (dataArry[s].like) +"</td"+">");           $trTemp.append("<td"+">"+ (dataArry[s].play) +"</td"+">") ;           $trTemp.appendTo("#bodybox");       }</script></body></html>

原文地址:https://www.cnblogs.com/lihong-123/p/9157344.html

时间: 2024-10-09 16:07:55

动态加载表格数据(自定义)的相关文章

如何用easyui动态加载表格标题

在最近做的项目中涉及到了需要加载大量表格的功能,采用了easyui的datagrid,但是发现datdagrid表格标题需要手动写,这在表格多的情况是一件很麻烦的事情.经过了long long time 终于研究出来了动态加载表格标题的方法. 首先给下效果图. 刚开始本人用easyui最原始的方式将表格放入我需要它放置的位置.整体页面因为某些原因呢就不展示给大家看了. 首先大家可以去网上下载easyui的包以及easyui的中文文档.easyui包友情链接:http://www.jeasyui.

ext combobox动态加载数据库数据

前台: var provinceStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: basePath + "/stationManage/station_getProvinceJSON.action" }), reader: new Ext.data.JsonReader( { root: "" }, ["PROVINCEID", "PROVINCENAME

动态加载页面数据的小工具 javascript + jQuery (持续更新)

使用该控件,可以根据url,参数,加载html记录模板(包含json参数对应,以及具体记录位置Index根据参数描述加载对应的属性,并可以根据简单的判断分支加载对应html或者控件)至列表容器内(JQuery选择器字符串)注: 该控件在使用前需引入JQuery框架支持,使用该控件,可极大的减少Ajax列表数据动态加载开发工作的实际工作量. 使用方式: 首先,添加控件引用,并加入Jquery支持 <script src="js/jquery.js"></script&g

viewpager动态加载listView数据

package com.example.viewpage; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.annotation.SuppressLint; import android.app.Activity; import android.graphics.BitmapFactory; import androi

Echarts使用及动态加载图表数据

Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地域.访问者).全方位分析网站流量的统计标准,形成原始数据,数据视觉化,数据行为化,数据深入挖掘的数据分析的模式 2.指标(衡量数据) 指标是指可以按总数或比值衡量的具体维度元素.例如,维度"城市"可以关联指标"人口",其值为具体城市的居民总数  

python获取动态网站上面的动态加载的数据(初级)

我们在处理一些网站数据的时候,有时候我们需要的数据很多都是动态加载的,而不都是静态的,以下以一个实例来介绍简单的获取动态数据,首先申明本人小白,还在学习python中,这个方法还是比较笨拙的,但是对于初学者还是需要知道的. 首先我们的要求是获取下面文章的参考文献: 刚刚开始,我的想法是使用lxml.BeatifulSoup.正则表达式来处理,这几个是处理静态网站的常用方法,查看网页源码我们会发现相应的div里面是空,也就是说上面的数据不是静态的,而是后面动态加载的,利用googl浏览器可以看到:

Echarts动态加载后台数据

注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后台返了个二维数组过去. 前端JSP页面:为Echarts准备一个具有高宽的dom容器 前端JS:初始化时即加载Echarts,将不需要进行加载的配置项(例如title.tooltip等)不作改动,将需要动态加载数据的配置放入ajax的success:function(){}中进行处理. 定义一个为s

在页面中使用拼接字符串的方式显示动态加载的数据

在做页面的时候为了使页面美化,我们经常会用拼接字符串的方式,动态加载后台的数据,这里我们使用的前台框架是bootstrap,但是很多效果还是要用jquery来实现 (1)方法传参与字符串的拼接  (拼接用的replace) 先声明一个展示数据的页面模型(使用过的模型1) var userModel = "<div class=\"itemdiv commentdiv\" style=\"margin-left: 7%;\">"+ &q

Echarts ajax动态加载json数据

后台php写的,给前台准备好json格式数据 public function actionGetOffline(){ $userid = Yii::$app->user->identity->user_id; $connection = Yii::$app->db; $command = $connection->createCommand("SELECT proc_phase_id from tb_pro where user_id like '%$userid%