js上三行下三行和添加多个附件
function addTr(num) {
no ++;
var obj = document.getElementById(tableID);
var oneRow = obj.insertRow(num);
var cells = new Array();
for (i = 0; i < 24; i ++) {
cells[i] = oneRow.insertCell(i);
}
cells[0].innerHTML = no;
cells[1].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" id="COMPANYEVENTID_' + no+'" dataType="Require" msg="管理处名称为必填项" readonly></textarea>'+
'<input type="hidden" id="DEPARTMENTID_' + no+'" name="stationObject" value="">';
cells[2].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" id="LINELOOPNAME_' + no+'" dataType="Require" msg="管道名称为必填项" readonly></textarea>'+
'<input type="hidden" id="LINELOOPEVENTID_' + no+'" name="stationObject" onpropertychange="getLineMessage(' + no+')">';
cells[3].innerHTML = '<input type="text" class="input_bg" name="stationObject" id="DIAMETER_' + no+'" dataType="Require" msg="管径为必填项">';
cells[4].innerHTML = '<input type="text" class="input_bg" name="stationObject" id="PIPELINEDISTANCES_' + no+'" dataType="Double" require="true" msg="管道长度为必填项并且为正数" maxlength="20">';
cells[5].innerHTML = '<input type="text" class="input_bg" name="stationObject" id="DESIGNPRESSURE_' + no+'" dataType="Require" msg="设计压力为必填项">';
cells[6].innerHTML = '<input type="text" class="input_bg" name="stationObject" id="USETIME_' + no+'" dataType="Require" msg="投产时间为必填项">';
cells[7].innerHTML = '<input type="text" class="input_bg" readonly id="PRODUCTTYPE_' + no+'" name="stationObject">';
cells[8].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" id="BEGINSITENAME_' + no+'" readonly dataType="Require" msg="上游站场为必填项"></textarea>'+
'<input type="hidden" name="stationObject" id="BEGINSITEEVENTID_' + no+'">'+
'<input type="hidden" name="stationObject" id="BEGINSTATIONSERIESEVENTID_' + no+'">'+
'<input type="hidden" name="stationObject" id="BEGINSTATION_' + no+'" onpropertychange="getinsplength('+no+')">';
cells[9].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" id="ENDSITENAME_' + no+'" readonly dataType="Require" msg="下游站场为必填项"></textarea>'+
'<input type="hidden" name="stationObject" id="ENDSITEEVENTID_' + no+'">'+
'<input type="hidden" name="stationObject" id="ENDSTATIONSERIESEVENTID_' + no+'">'+
'<input type="hidden" name="stationObject" id="ENDSTATION_' + no+'" onpropertychange="getinsplength('+no+')">';
cells[10].innerHTML = '<input type="text" class="input_bg" id="disbetween_'+no+'" name="stationObject" value="" dataType="Double" require="true" msg="站间长度为必填项并且为正数" maxlength="20">';
cells[11].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>';
cells[12].innerHTML = '<input type="text" class="input_bg" readOnly name="stationObject" value="" onfocus="new WdatePicker(this, \'%Y\',false)" dataType="Require" msg="检测完成时间为必填项">';
cells[13].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>';
cells[14].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>';
cells[15].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>';
cells[16].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>';
cells[17].innerHTML = '<input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用为必填项并且为正数" maxlength="20">';
cells[18].innerHTML = '<input type="text" class="input_bg" readOnly name="stationObject" value="" onfocus="new WdatePicker(this, \'%Y\',false)" dataType="Require" msg="检测时间为必填项">';
cells[19].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>';
cells[20].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" require="false" dataType="Limit" max="500" msg="备注在250字内"></textarea>';
cells[21].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" require="true" dataType="Limit" max="500" msg="需满足的检测条件为必填项并且在250字内"></textarea>';
cells[22].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>';
cells[23].innerHTML = '<input type="button" value="上" style="cursor:hand" title="向上增加一行" onclick="addTr(getRowIndex(this))"><br><input type="button" style="cursor:hand" title="删除本行" value="删" onclick="reMoveTr(getRowIndex(this))"><br><input type="button" style="cursor:hand" title="向下增加一行" value="下" onclick="addTr(getRowIndex(this)+1)">';
setNumber();
}
function deleteTr(obj, index) {
obj.deleteRow(index);
}
function reMoveTr(num) {
var rows = (document.getElementsByName(inputNames).length - behind - before) / inputColnum;
if (rows > 1) {
deleteTr(document.getElementById(tableID), num);
setNumber();
} else {
alert('至少保留一组数据！');
}
}
function getRowIndex(obj) {
var table = document.getElementById(tableID);
obj = obj.offsetParent;
var index = 0;
for (var i = beforeRows; i < table.rows.length - behindRows; i ++) {
for (var j = 0; j < table.rows(i).cells.length; j ++) {
if (table.rows(i).cells(j) == obj) {
index = i;
}
}
}
return index;
}
// 设置行编号
function setNumber() {
var num = 0;
var table = document.getElementById(tableID);
for (var i = beforeRows; i < table.rows.length - behindRows; i ++){
num ++;
var tdObj = table.rows(i).cells(0);
tdObj.innerHTML = num;
}
}
上三行和下三行的js
function addTR(){
var table = document.getElementById(fileTableID);
var length = table.rows.length;
if ( fileMaxCount!=-1 && length-1 > fileMaxCount) {
alert("最多上传10个附件！");
return;
}
var oRow1 = upLoadTable.insertRow(length);
var aCells = oRow1.cells;
var oCell1_1 = oRow1.insertCell(aCells.length);
var oCell1_2 = oRow1.insertCell(aCells.length);
var oCell1_3 = oRow1.insertCell(aCells.length);
var oCell1_4 = oRow1.insertCell(aCells.length);
var oCell1_5 = oRow1.insertCell(aCells.length);
oCell1_1.width = "14%";
oCell1_1.className="td_text";
oCell1_2.width = "34%";
oCell1_2.className="td_element";
oCell1_3.width = "16%";
oCell1_3.className="td_text";
oCell1_4.width = "25%";
oCell1_4.className="td_element";
oCell1_5.width = "9%";
oCell1_5.className="td_element";
oCell1_2.id = "tdFile" + annex;
oCell1_1.innerHTML = "附件"+annex+":";
oCell1_2.innerHTML = "<input id='file' type='file' name='file" + desinfoid + "' style='height:20px;width:100%' class='input_bg' onChange='chkSize(this," + desinfoid + ")' onKeyDown='return false'/>";
oCell1_3.innerHTML = "描述:";
oCell1_4.innerHTML = "<input type='text' class='input_bg' readOnly='true' class='text' id='desinfo" + desinfoid + "' name='filedesportor' require='false' dataType='Limit' max='250' msg='附件描述必须在250个字之内'/>"
oCell1_5.innerHTML = "<input class='button_bg' type='button' value='删除' onclick='deleteTR(this)'>" ;
annex++;
desinfoid++;
}
function deleteTR(obj) {
var rowIndex = obj.parentElement.parentElement.rowIndex;
if (rowIndex > -1){
upLoadTable.deleteRow(rowIndex);
annex--;
setNumber();
}
}
function setNumber() {
var num = 0;
var table = document.getElementById(fileTableID);
for (var i = fileBeforeRows; i < table.rows.length - fileBehindRows; i ++) {
num ++;
var tdObj = table.rows(i).cells(0);
tdObj.innerHTML = "附件"+num+":";
}
}
function onLoadTr(num) {
for (var i = 0; i < num; i++) {;
addTR();
}
}
function chkSize (obj,id) {
var ext = obj.value;
var ss = ext.split('.');
var strs = ext.split('\\');
var exts=document.getElementById("exts").value;
if (exts.indexOf(ss[ss.length - 1].toLowerCase()) == -1) {
alert("您上传的文件不符合格式要求，不允许上传！");
document.getElementById('tdFile'+id).innerHTML="<input type='file' style='height:20px;width:100%' class='input_bg' name='file" + id + "' onChange='chkSize(this," + id + ")' onKeyDown='return false'/>";
document.getElementById('desinfo' + id).readOnly = true;
}else if(strs[strs.length - 1].length > 50){
alert("文件名不能超过50个字！");
document.getElementById('tdFile'+id).innerHTML="<input type='file' style='height:20px;width:100%' class='input_bg' name='file" + id + "' onChange='chkSize(this," + id + ")' onKeyDown='return false'/>";
document.getElementById('desinfo' + id).readOnly = true;
}else {
document.getElementById('desinfo' + id).readOnly = false;
}
}
添加多附件js
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" href="complex.css" type="text/css"></link>
<script type="text/javascript" src="insert.js"></script>
<script type="text/javascript" language="javascript" src="insertfile.js"></script>
</head> <body scroll="no">
<table class="editable" style="width:100%" cellpadding="0" cellspacing="1" id="reportFrame1">
<tr>
<td width="1%" rowspan=2>序号</td>
<td width="5.5%" rowspan=2>管理处名称</td>
<td width="5.5%" rowspan=2>管道名称</td>
<td width="4.5%" rowspan=2>管径(mm)</td>
<td width="4.5%" rowspan=2>管道(管段)长度(km)</td>
<td width="4.5%" rowspan=2>设计压力MPa</td>
<td width="3.5%" rowspan=2>投产时间</td>
<td width="4.5%" rowspan=2>输送介质</td>
<td width="15.5%" colspan=3>站间段(按可收发球站间逐个填写)</td>
<td width="33.5%" colspan=7>内检测历史</td>
<td width="9%" colspan=2>基线或再检测计划</td>
<td width="5.5%" rowspan=2>备注</td>
<td width="5.5%" rowspan=2>需满足的检测条件(如输量范围)</td>
<td width="4.5%" rowspan=2>生产运行是否满足</td>
<td width="1%" rowspan=2></td>
</tr>
<tr>
<td width="5.5%">上游站名称</td>
<td width="5.5%">下游站名称</td>
<td width="4.5%">站间长度(km)</td>
<td width="4.5%">有无内检测历史</td>
<td width="4.5%">检测完成时间(年)</td>
<td width="5.5%">检测方法</td>
<td width="5.5%">检测承担单位</td>
<td width="4.5%">检测器类型</td>
<td width="4.5%">检测器精度</td>
<td width="4.5%">检测费用(万元)</td>
<td width="3.5%">检测时间(年)</td>
<td width="5.5%">建议检测方法</td>
</tr>
<tr>
<td>1</td>
<td><textarea class="textarea" rows="2" name="stationObject" id="COMPANYEVENTID" dataType="Require" msg="管理处名称为必填项" readonly></textarea>
<input type="hidden" id="DEPARTMENTID" name="stationObject" value=""></td>
<td><textarea class="textarea" rows="2" name="stationObject" id="LINELOOPNAME" dataType="Require" msg="管道名称为必填项" readonly></textarea>
<input type="hidden" id="LINELOOPEVENTID" name="stationObject" onpropertychange="getLineMessage()"></td>
<td><input type="text" class="input_bg" name="stationObject" id="DIAMETER" value="" dataType="Require" msg="管径为必填项"></td>
<td><input type="text" class="input_bg" name="stationObject" id="PIPELINEDISTANCES" value="" dataType="Double" require="true" msg="管道长度为必填项并且为正数" maxlength="20"></td>
<td><input type="text" class="input_bg" name="stationObject" id="DESIGNPRESSURE" value="" dataType="Require" msg="设计压力为必填项"></td>
<td><input type="text" class="input_bg" name="stationObject" id="USETIME" dataType="Require" msg="投产时间为必填项"></td>
<td><input type="text" class="input_bg" readonly id="PRODUCTTYPE" name="stationObject"></td>
<td><textarea class="textarea" rows="2" name="stationObject" id="BEGINSITENAME" readonly dataType="Require" msg="上游站场为必填项"></textarea>
<input type="hidden" name="stationObject" id="BEGINSITEEVENTID"/>
<input type="hidden" name="stationObject" id="BEGINSTATIONSERIESEVENTID" />
<input type="hidden" name="stationObject" id="BEGINSTATION" onpropertychange="getinsplength()"/></td>
<td><textarea class="textarea" rows="2" name="stationObject" id="ENDSITENAME" readonly dataType="Require" msg="下游站场为必填项"></textarea>
<input type="hidden" name="stationObject" id="ENDSITEEVENTID"/>
<input type="hidden" name="stationObject" id="ENDSTATIONSERIESEVENTID" />
<input type="hidden" name="stationObject" id="ENDSTATION" onpropertychange="getinsplength()"/></td>
<td><input type="text" class="input_bg" id="disbetween" name="stationObject" value="" dataType="Double" require="true" msg="站间长度为必填项并且为正数" maxlength="20"></td>
<td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td>
<td><input type="text" class="input_bg" readOnly name="stationObject" value="" onfocus="new WdatePicker(this, '%Y',false)" dataType="Require" msg="检测完成时间为必填项"></td>
<td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td>
<td><textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea></td>
<td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td>
<td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td>
<td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td>
<td><input type="text" class="input_bg" readOnly name="stationObject" value="" onfocus="new WdatePicker(this, '%Y',false)" dataType="Require" msg="检测时间为必填项"></td>
<td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td>
<td><textarea class="textarea" rows="2" name="stationObject" require="false" dataType="Limit" max="500" msg="备注在250字内"></textarea></td>
<td><textarea class="textarea" rows="2" name="stationObject" require="true" dataType="Limit" max="500" msg="需满足的检测条件为必填项并且在250字内"></textarea></td>
<td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td>
<td><input type="button" value="上" style="cursor:hand" title="向上增加一行" onclick="addTr(getRowIndex(this))"><br><input type="button" style="cursor:hand" title="删除本行" value="删" onclick="reMoveTr(getRowIndex(this))"><br><input type="button" style="cursor:hand" title="向下增加一行" value="下" onclick="addTr(getRowIndex(this)+1)"></td>
</tr>
</table>
<input type="hidden" name="exts" value="txt,doc,docx,pdf,xls,xlsx,rar,zip,jpg,jpeg,gif,png,bmp">
<table class="editable" style="width:100%" cellpadding="0" cellspacing="1" id="upLoadTable">
<tr>
<td width="14%" style="font-weight:bold;text-align:right">文档附件</td>
<td width="86%" colspan="4">
<span class="xuxian_td" style="width:'99%';align:right; margin-left:0px;padding-left:0px;">
<p align="right">
<input name="insertf" class="button_bg" type="button" style="width:72px;align:right;margin-right:-2px;padding-right:-2px;" value="添加附件" onClick="addTR()">
</p>
</span>
</td>
</tr>
<tr>
<td colspan="5"><B>提示：</B><span style="color:red;font-size:13">附件文件类型为 txt,doc,docx,pdf,xls,xlsx,rar,zip,jpg,jpeg,gif,png,bmp ; 文件大小不能超过 10M</span></td>
</tr>
</table>
</body>
<script type="text/javascript">
<!--
var no = 1;
var before = 0;//*前面有多少个input
var behind = 0;//*后面有多少个input
var beforeRows = 2;//*自动增长行前面有多少行
var behindRows = 0;//*自动增长行后面有多少行
var inputColnum = 30;//要添加多少个input
var inputNames = 'stationObject';
var tableID = 'reportFrame1';
//附件上传
var annex = 1;
var fileBeforeRows = 2;//*自动增长行前面有多少行
var fileBehindRows = 0;//*自动增长行后面有多少行
var fileMaxCount = 10;//*所允许上传的最大附件个数
var fileTableID = 'upLoadTable';//*
var desinfoid = 1;
//-->
</script>
</html>
上三行下三行页面
好长时间没有写博文了，现在分享一下最近一段时间做的关于javascript的代码，上三行下三行js和添加多附件js。给大家分享一下。
添加多附件js运行效果如下：
上三行和下三行运行效果如下：
里面写的都很详细，有什么不懂的大家可以问我。多多提出问题。
js上三行下三行和添加多个附件的更多相关文章
- 原生js在IE7下 向dom添加节点的一个bug, (本例为添加hidden input)
需求是要用js向dom结构增加1个hidden用来存放要post到服务器的数据 var aspnetForm = document.getElementById("aspnetForm&qu ...
- JS为Select下拉框添加输入功能
JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于se ...
- js实现Mac触摸板双指事件（上、下、左、右、放大、缩小）
前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠 ...
- js不是从上到下执行的吗？
如果说js是从上到下解释执行的, 那么,按道理应该会执行错误前面的代码. 如: [代码一] //输出1,2,到3报错 console.log("一") console.log(&q ...
- JS/CSS 全屏幕导航 – 从上到下动画
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 用js刷剑指offer(从上到下打印二叉树)
题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 牛客网链接 js代码 /* function TreeNode(x) { this.val = x; this.left = null ...
- JS Div滚动，下拉框添加属性，年月日下拉条
创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...
- 微信JS图片上传与下载功能--微信JS系列文章（三）
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
- 《剑指offer》第三十二题（分行从上到下打印二叉树）
// 面试题32(二):分行从上到下打印二叉树 // 题目:从上到下按层打印二叉树,同一层的结点按从左到右的顺序打印,每一层 // 打印到一行. #include <cstdio> #in ...
随机推荐
- .NET 实现异步处理的集中方式
对于异步,相信大家都不十分陌生.准确点来说就是方法执行后立即返回,待到执行完毕会进行通知.就是当一个任务在执行的时候,尤其是需要耗费很长的时间进行处理的任务,如果利用单线程进行操作的话,势必造成界面的 ...
- git大文件管理
由于git在每一个commit时都会变动过的文件全部保存(不像其他的系统,只做文件增量存储),外加未变动文件的引用,这样如果在文件系统中有一些大的二进制文件,比如图片,视频,那么很快你的repo就将变 ...
- Mvc 自带分页控件PagedList.Mvc Demo示例
添加/下载PagedList.Mvc 直接搜索mvc pagelist 就会出来.安装完成即可.在项目的packages文件夹下面就会出现PagedList.Mvc.4.5.0.0 和PagedLis ...
- HDU 4324 (拓扑排序) Triangle LOVE
因为题目说了,两个人之间总有一个人喜欢另一个人,而且不会有两个人互相喜欢.所以只要所给的图中有一个环,那么一定存在一个三元环. 所以用拓扑排序判断一下图中是否有环就行了. #include <c ...
- 学会简单使用poi进行excel有关操作
直接上代码: 官网上的抄的api例子: package com.test; import java.io.File; import java.io.FileInputStream; import ja ...
- 20160128.CCPP体系详解(0007天)
以下内容有所摘取,进行了某些整理和补充 论浮点数的存储原理:float浮点数与double浮点数的二进制存储原理–>阶码 浮点数转二进制 1.整数int类型和浮点数float类型都是占用4个字节 ...
- erl0005 - mnesia 分布式部署
http://www.iteye.com/topic/643187 1.启动两个互通的节点a.b: 2.在a节点net_adm:ping(b) 查看ab之间是否联通(nodes()). 3.在保持通的 ...
- Hibernate-Criteria Queries
1.实例 接口org.hibernate.Criteria针对特殊持久层类进行查询,Sesion是Criteria的工厂: Criteria crit = sess.createCriteria(Ca ...
- 第三集 欠拟合与过拟合的概念、局部加权回归、logistic回归、感知器算法
课程大纲 欠拟合的概念(非正式):数据中某些非常明显的模式没有成功的被拟合出来.如图所示,更适合这组数据的应该是而不是一条直线. 过拟合的概念(非正式):算法拟合出的结果仅仅反映了所给的特定数据的特质 ...
- HDU 4662 MU Puzzle 2013 Multi-University Training Contest 6
现在有一个字符串"MI",这个字符串可以遵循以下规则进行转换: 1.Mx 可以转换成 Mxx ,即 M 之后的所有字符全部复制一遍(MUI –> MUIUI) 2.III 可 ...