表格数据js初始绑定
html调用js文件,js初始化时发送Ajax请求,获取页面数据将其写入在html页面上展示
html
<div class="card-body">
<!-- 表格实例代码 -->
<div style="height:38em">
<table id="listmap1" class="table table-hover">
<thead>
<tr>
<th class="checkRadioBox" style="width:30px;">
<!-- input 的ID必须为唯一的;ID必须与abel for="checkbox_all" for的值对应 -->
<input type="checkbox" id="checkbox_all" name="message" class="chk_1" />
<label for="checkbox_all"></label>
</th>
<th class="text-center" style="width:20%">批次号</th>
<th class="text-center" style="width:10%">申请人</th>
<th class="text-center" style="width:10%">状态</th>
<th class="text-center" style="width:10%">总数</th>
<th class="text-center" style="width:10%">推送成功</th>
<th class="text-center" style="width:10%">推送未完成</th>
<th class="text-center" style="width:20%">申请时间</th>
<th class="text-center" style="width:10%">操作</th>
</tr>
</thead>
<!--存放数据的地方-->
<tbody style="min-height: 500px;" id="tbody1">
</tbody>
</table>
</div>
<!-- 引入js文件,用来调用里面的初始化方法为表格赋初值 -->
<script type="text/javascript" src="${contextPath}/js/rwsqs/list1.js"></script>
</div>
js文件
<!--被引入时先初始化,初始化时发送Ajax获取想要的表格数据并调用addhtml1方法,将数据展示出来-->
$(function() {
$.ajax({
type : 'POST';
url : basepath + '/getInfo';
data : {
"page" : 1,
"rows" : 10
},
success : function(data){
addhtml1(data)
}
});
}
<!--在页面上展示数据-->
function addhtml1(data){
$("#tbody1").html("");
for(var i=0;i<data.rows.length;i++){
$("#tbody1").append("<tr>"
+"<td scope='checkRadioBox'><input type='checkbox' name='ch1' id='ch1-"+data.rows[i].batch+"' value='"+data.rows[i].batch+"' class='chk_1' />"
+"<label for='ch1-"+data.rows[i].batch+"'></label>"
+"</td>"
+"<td><a href='javascript:;'>"+data.rows[i].batch+"</a></td>"
+"<td class='text-center'>"+data.rows[i].apply_name+"</td>"
+"<td class='text-center'>"+data.rows[i].state+"</td>"
+"<td class='text-center'>"+data.rows[i].size+"</td>"
+"<td class='text-center'>"+data.rows[i].oksize+"</td>"
+"<td class='text-center'>"+data.rows[i].nosize+"</td>"
+"<td class='text-center'>"+data.rows[i].createTime+"</td>"
+"<td class='text-center'>"
+"</td>"
+"</tr>");
}
}
表格数据js初始绑定的更多相关文章
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- js如何实现动态显示表格数据(点奇数显示奇数单元格内容)
js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- js导出表格数据
考虑到浏览器兼容性问题,采用原生js和后台交互下载网页数据 js: var table = $('.table-panel table'); // Header var tdData ="& ...
- 数据的双向绑定 Angular JS之开端篇
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...
随机推荐
- android灭屏后调用binder通讯竟然影响了socket的POLL_OUT事件,怪事。
当你的android在灭屏(休眠)时分派(dispatch) Ice调用过程中,如果创建了新的进程,你的响应将不会预期那样工作,尽管你已经调用 ice_response或 ice_exception, ...
- ACL2019: 《GraphRel: Modeling Text as Relational Graphs for Joint Entity and Relation Extraction》源码解析
论文地址:<GraphRel: Modeling Text as Relational Graphs for Joint Entity and Relation Extraction> G ...
- STDN: Scale-Transferrable Object Detection论文总结
概述 STDN是收录于CVPR 2018的一篇目标检测论文,提出STDN网络用于提升多尺度目标的检测效果.要点包括:(1)使用DenseNet-169作为基础网络提取特征:(2)提出Scale-tra ...
- Spring Boot2 系列教程(二十七)Nginx 极简扫盲入门
上篇文章和大家聊了 Spring Session 实现 Session 共享的问题,有的小伙伴看了后表示对 Nginx 还是很懵,因此有了这篇文章,算是一个 Nginx 扫盲入门吧! 基本介绍 Ngi ...
- 使用Query Store监控性能
Query Store是SQL Server 2016中引入的语句性能监控和调优工具,它不仅自动捕获查询.执行计划和运行时统计信息的历史记录,而且还可以识别出由于执行计划更改而导致的性能差异,简化了性 ...
- python变量、输入输出-xdd
1.注释 #输入身高,计算BMI 注释1,单行注释... 注释2,多行注释xiedong.. 2.中文编码声明,UTF-8编码声明 # coding=编码 # coding=utf-8 3.建议每行不 ...
- Java中的Calendar 类和SimpleDateFormat 类
1.Calendar 类:import java.util.Calendar; Calendar cal = Calendar.getInstance(); ...
- mysql的事物,外键,与常用引擎
### part1 时间类型 date YYYY-MM-DD 年月日 (出现日期) time HH:MM:SS 时分秒 (竞赛时间) year YYYY 年份值 (红酒年份 82年矿泉水) datet ...
- C# 异步并发操作,只保留最后一次操作
在我们业务操作时,难免会有多次操作,我们期望什么结果呢? 绝大部分情况,应该是只需要最后一次操作的结果,其它操作应该无效. 自定义等待的任务类 1. 可等待的任务类 AwaitableTask: // ...
- C语音I博客作业09
------------恢复内容开始------------ 这个作业属于那个课程|C语言程序设计II --|:--:|--: 这个作业要求在哪里|https://edu.cnblogs.com/ca ...