MiniUI动态添加table表格
本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格
1.效果展示
↓
2.具体代码
<script type="text/javascript">
function addRow() {
var form = document.getElementById("addForm");
var table = document.getElementById("table_Records");
var id_com = form.getElementsByTagName("input")[0].value;
var id_txtOne = form.getElementsByTagName("input")[2].value;
var id_txtTwo = form.getElementsByTagName("input")[4].value;
var i = table.rows.length - 1;
var tr = table.insertRow();
tr.style.cssText = table.rows[0].style.cssText;
tr.insertCell(0).innerHTML = parseInt(table.rows[i].cells[0].innerHTML) + 1;
tr.insertCell(1).innerHTML = id_txtOne;
tr.insertCell(2).innerHTML = parseInt(id_txtOne) + parseFloat(table.rows[i].cells[2].innerHTML);
tr.insertCell(3).innerHTML = id_com;
tr.insertCell(4).innerHTML = "2.6";
tr.insertCell(5).innerHTML = id_txtTwo;
tr.insertCell(6).innerHTML = parseInt(id_txtTwo) + parseFloat(table.rows[i].cells[6].innerHTML);
}
</script>
Javascript
<div align="center">
<fieldset style="width:782px;border:solid 1px #aaa;margin-top:8px;position:relative;">
<legend>添加施工记录</legend>
<div id="addForm" style="padding:5px;">
<table style="width:100%;">
<tr>
<td>工序:</td>
<td><input id="id_com" class="mini-combobox" url="~/Data/data_GongXu.txt" /></td>
<td>施工时间(min):</td>
<td><input id="id_one" class="mini-textbox" /></td>
<td>压裂液用量(m³):</td>
<td><input id="id_two" class="mini-textbox" /></td>
<td><a class="mini-button" onclick="addRow">添加</a></td>
</tr>
</table>
</div>
</fieldset>
<br />
<table id="table_Records" border="1" cellpadding="0" cellspacing="0" style="width:800px;text-align:center">
<tr>
<td rowspan="2">步骤</td>
<td colspan="2">施工时间min</td>
<td rowspan="2">工序</td>
<td rowspan="2">排量m³/min</td>
<td colspan="2">压裂液用量m³</td>
</tr>
<tr>
<td>阶段</td>
<td>累积</td>
<td>阶段</td>
<td>累积</td>
</tr>
<tr height=18>
<td height=18>1</td>
<td>11.5</td>
<td>11.5</td>
<td>前置液</td>
<td>2.6</td>
<td>30</td>
<td>30</td>
</tr>
<tr height=18 style='height:13.5pt'>
<td height=18>2</td>
<td>10</td>
<td>21.5</td>
<td>携砂液</td>
<td>2.6</td>
<td>20</td>
<td>50</td>
</tr>
<tr height=18 style='height:13.5pt'>
<td height=18>3</td>
<td>5</td>
<td>26.5</td>
<td>替挤液</td>
<td>2.6</td>
<td>10</td>
<td>60</td>
</tr>
</table>
</div>
Html
不要忘记一点,这里需要引用miniUI的css、js等文件,不然无法显示该样式。
3.操作说明
1> 当每一次点击“添加”按钮的时候,阶段下的单元格就会新添一条你输入到文本框中的值,而累积则会将上一行的数值与你输入值的和显示出来,以此来达到一个动态添加table行的操作。
2> 这里暂时先用js的代码来获取html的控件,因为miniUI的API中没有找到关于table的获取/设置属性值的介绍,若有了解的大神,非常高兴一起讨论研究!
MiniUI动态添加table表格的更多相关文章
- C#后台动态添加Grid表格
前面页面: <ScrollViewer x:Name=" BorderBrush="#25A0DA" VerticalScrollBarVisibility=&qu ...
- js 动态添加Table tr,选中与不选中checkbox行数NO的变化
首次加载进入页面,如图: 注:Table是在js中拼接字符串循环动态添加的(拼接字符串,详见之前随笔) 点击Line2 checkbox后,效果如图: 实现的效果就是: 点击checkbox — 显示 ...
- asp.net实现动态添加table行
asp.net动态的生成,删除table的行,主要是在后台动态创建单元行,单元表格,效果图: 2.代码: <%@ Page Language="C#" AutoEventWi ...
- js动态添加table 数据tr td
成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table 概要代码 ...
- Jquery动态添加/删除表格行和列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ASP.NET+ashx+jQuery动态添加删除表格
aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...
- 动态创建table表格页面出现undefined原因以及修改
源代码: var html: if(lists) { html += '<a href="https://www.4001149114.com/NLJJ/member/sharecel ...
- VUE动态生成table表格(element-ui)(新增/删除)
(直接复制即可测试) 结构(红色部分 data/prop/v-model 数据绑定): <template> <el-table size="small" :da ...
- html 动态添加TABLE的行。
<script type="text/javascript"> var pos =4;//默认位置为4,根据自己需要,也可以通过鼠标事件获取当前行数. function ...
随机推荐
- memcache 笔记
在windows下安装memecache,进入到安装目录,执行帮助命令可以查看到相关帮助 启动memcache,相关命令如上,比如-p就是端口号,memcache默认端口号是11211 语法:增加ad ...
- http协议笔记
协议:双方/多方共同遵守的一个规范.类比生活中协议 理解: webservice=http协议+xml Rest =http协议+json 开始,客户端和其他服务器都是没有关系的,比如 ...
- Memcache教程 Memcache零基础教程
Memcache是什么 Memcache是danga.com的一个项目,来分担数据库的压力. 它可以应对任意多个连接,使用非阻塞的网络IO.由于它的工作机制是在内存中开辟一块空间,然后建立一个Hash ...
- FastJson和AsyncHttpCLient
Android的展示数据,除了上章所讲的本地存储外,大部分数据都来自于网络.首先介绍一下Android APP开发常见的网络操作方式.从网络层面上有底层的tcp/ip,也就是我们常见的socket套接 ...
- github搭建静态博客
p { margin-bottom: 0.1in; line-height: 120% } 1. 创建Repository 创建一个与自己github用户名对应的Repository,例如:abc.g ...
- kafka - advertised.listeners and listeners
listeners, Listener List - Comma-separated list of URIs we will listen on and their protocols. Speci ...
- php usort 按照数组中的某个键值排序
//php usort 按照数组中的某个键值排序 如果第一个参数小于第二个参数 -> 返回小于0的整数如果第一个参数等于于第二个参数 -> 返回等于0的整数如果第一个参数大于于第二个参数 ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- ASP.NET MVC 项目中 一般处理程序ashx 获取Session
1-在 aspx和aspx.cs中,都是以Session["xxx"]="aaa"和aaa=Session["xxx"].ToString( ...
- [flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...