本文将介绍一下,如何用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&sup3;):</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&sup3;/min</td>
<td colspan="2">压裂液用量m&sup3;</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表格的更多相关文章

  1. C#后台动态添加Grid表格

    前面页面: <ScrollViewer x:Name=" BorderBrush="#25A0DA" VerticalScrollBarVisibility=&qu ...

  2. js 动态添加Table tr,选中与不选中checkbox行数NO的变化

    首次加载进入页面,如图: 注:Table是在js中拼接字符串循环动态添加的(拼接字符串,详见之前随笔) 点击Line2 checkbox后,效果如图: 实现的效果就是: 点击checkbox — 显示 ...

  3. asp.net实现动态添加table行

    asp.net动态的生成,删除table的行,主要是在后台动态创建单元行,单元表格,效果图: 2.代码: <%@ Page Language="C#" AutoEventWi ...

  4. js动态添加table 数据tr td

    成果库修改:      要求主题列表随成果类型改变而改变      网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table      概要代码 ...

  5. Jquery动态添加/删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. ASP.NET+ashx+jQuery动态添加删除表格

    aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...

  7. 动态创建table表格页面出现undefined原因以及修改

    源代码: var html: if(lists) { html += '<a href="https://www.4001149114.com/NLJJ/member/sharecel ...

  8. VUE动态生成table表格(element-ui)(新增/删除)

    (直接复制即可测试) 结构(红色部分 data/prop/v-model 数据绑定): <template> <el-table size="small" :da ...

  9. html 动态添加TABLE的行。

    <script type="text/javascript"> var pos =4;//默认位置为4,根据自己需要,也可以通过鼠标事件获取当前行数. function ...

随机推荐

  1. memcache 笔记

    在windows下安装memecache,进入到安装目录,执行帮助命令可以查看到相关帮助 启动memcache,相关命令如上,比如-p就是端口号,memcache默认端口号是11211 语法:增加ad ...

  2. http协议笔记

    协议:双方/多方共同遵守的一个规范.类比生活中协议 理解: webservice=http协议+xml Rest         =http协议+json 开始,客户端和其他服务器都是没有关系的,比如 ...

  3. Memcache教程 Memcache零基础教程

    Memcache是什么 Memcache是danga.com的一个项目,来分担数据库的压力. 它可以应对任意多个连接,使用非阻塞的网络IO.由于它的工作机制是在内存中开辟一块空间,然后建立一个Hash ...

  4. FastJson和AsyncHttpCLient

    Android的展示数据,除了上章所讲的本地存储外,大部分数据都来自于网络.首先介绍一下Android APP开发常见的网络操作方式.从网络层面上有底层的tcp/ip,也就是我们常见的socket套接 ...

  5. github搭建静态博客

    p { margin-bottom: 0.1in; line-height: 120% } 1. 创建Repository 创建一个与自己github用户名对应的Repository,例如:abc.g ...

  6. kafka - advertised.listeners and listeners

    listeners, Listener List - Comma-separated list of URIs we will listen on and their protocols. Speci ...

  7. php usort 按照数组中的某个键值排序

    //php usort 按照数组中的某个键值排序 如果第一个参数小于第二个参数 -> 返回小于0的整数如果第一个参数等于于第二个参数 -> 返回等于0的整数如果第一个参数大于于第二个参数 ...

  8. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  9. ASP.NET MVC 项目中 一般处理程序ashx 获取Session

    1-在 aspx和aspx.cs中,都是以Session["xxx"]="aaa"和aaa=Session["xxx"].ToString( ...

  10. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...