android 动态添加表格,MiniUI动态添加table表格

本文将介绍一下，如何用Jquery MiniUi动态添加一行table表格

1.效果展示

↓

2.具体代码

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);

}

Javascript

添加施工记录

工序：

施工时间(min)：

压裂液用量(m³)：

添加

步骤	施工时间min		工序	排量m³/min	压裂液用量m³
	阶段	累积			阶段	累积
1	11.5	11.5	前置液	2.6	30	30
2	10	21.5	携砂液	2.6	20	50
3	5	26.5	替挤液	2.6	10	60

Html

不要忘记一点，这里需要引用miniUI的css、js等文件，不然无法显示该样式。

3.操作说明

1> 当每一次点击“添加”按钮的时候，阶段下的单元格就会新添一条你输入到文本框中的值，而累积则会将上一行的数值与你输入值的和显示出来，以此来达到一个动态添加table行的操作。

2> 这里暂时先用js的代码来获取html的控件，因为miniUI的API中没有找到关于table的获取/设置属性值的介绍，若有了解的大神，非常高兴一起讨论研究！

C#后台动态添加Grid表格

前面页面:

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

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

asp.net实现动态添加table行

asp.net动态的生成,删除table的行,主要是在后台动态创建单元行,单元表格,效果图: 2.代码:

js动态添加table 数据tr td

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

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

...

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

aspx:

源代码: var html: if(lists) { html += ' var pos =4;//默认位置为4,根据自己需要,也可以通过鼠标事件获取当前行数. function ...

使用element-ui 组件动态合并table的行/列(第二次修改)

这是第二次修改,在通过调用后台接口返回来的时候,发现了代码中的问题:现在将博客中错误的地方改过来,添加备注 文章需求:动态实现table表格中行/列的自动合并 使用框架及UI类库:Vue+Elemen ...

随机推荐

sql server 警报管理，实时监听数据库动向，运筹帷幄之中

工作这么多年了,无论是身边的同学还是同事,发现只要搞程序员的都有一个通病---懒.懒到谁都不愿意加班,尤其是"义务"加班.即使大家都不愿意加班,但是很多时候项目赶着上线或者上线之后 ...

【总结】我所整理的float, inline-block还有position:absolute

这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

C#线程系列讲座(2)：Thread类的应用

一.Thread类的基本用法 通过System.Threading.Thread类可以开始新的线程,并在线程堆栈中运行静态或实例方法.可以通过Thread类的的构造方法传递一个无参数,并且不返回值(返 ...

java 面向对象 2

一．JAVA类的定义 JAVA里面有class关键字定义一个类,后面加上自定义的类名即可.如这里定义的person类,使用class person定义了一个person类,然后在person这个类的类 ...

echart的x换行

option = { legend: { y: 'bottom', data:['该业务正常类比例','该业务关注类比例','该业务不良类比例'] }, xAxis: { type: 'categor ...

codeforces732C

Sanatorium CodeForces - 732C Vasiliy spent his vacation in a sanatorium, came back and found that he ...

C语言 · 最长单词

算法提高 最长单词   时间限制:1.0s   内存限制:512.0MB      编写一个函数,输入一行字符,将此字符串中最长的单词输出. 输入仅一行,多个单词,每个单词间用一个空格隔开.单词仅由小 ...

Python 中 __all__ 的作用

1.测试文件foo.py # -*- coding: utf-8 -*- # import sys # reload(sys) # sys.setdefaultencoding('gbk') __al ...