MiniUI动态添加table表格
2024-09-20 12:36:58
本文将介绍一下,如何用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的获取/设置属性值的介绍,若有了解的大神,非常高兴一起讨论研究!
最新文章
- ie 7/8不支持trim的属性的解决方案
- IE6 Must Die
- 《Swift开发指南》
- 监听EditText的变化
- 委托,匿名方法,Lambda,泛型委托,表达式树
- JavaScript -- 原型:prototype的使用
- 那些按烂的Linux命令集合贴
- kubernetes job的原理
- 大数据技术 - 分布式文件系统 HDFS 的设计
- windows 安装 keras
- Maven私服
- POJ 3692 Kindergarten(最大团问题)
- Python2.7-tarfile
- 极客互联网电视不是噱头,用户体验成创维G7200核心竞争力
- $data[$i++]+=2;不等于$data[$i++]=$data[$i++]+2;
- Java静态内存与动态内存分配的解析
- cool kickass
- python2.7下使用logging模块记录日志到终端显示乱码问题解决
- Centos7 Ntp 时间服务器
- 初拾Java(问题一:404错误,页面找不到)
热门文章
- Unity3D优化总结(一)
- O(n) 筛法求素数
- DevOps is dirty work - What&#39;s the deal
- Windows 7无法卸载及安装IE11的解决方法
- 一般企业网站,电商可以完全可以水平拓展的lanmp系统架构
- OLAP在大数据时代的挑战
- 解决Win10图片打开方式没有“Windows照片查看器”问题
- 20145220&;20145209&;20145309信息安全系统设计基础实验报告(3)
- (转)微信小程序破解IDE
- JavaScript的3大组成部分&;&;ECMAScript函数&;&;闭包