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 ...
随机推荐
- C#操作文件
c# 操作txt文件 # 操作txt文件 c#创建文本 private const string FILE_NAME = "ErroLog.txt"; public static ...
- laravel homestead vagrant box安装使用，问题，及相关命令
Vagrant is a tool that manages oracle virtual boxes 1.本地下载https://atlas.hashicorp.com/laravel/boxes/ ...
- UVa 10635 (LIS+二分) Prince and Princess
题目的本意是求LCS,但由于每个序列的元素各不相同,所以将A序列重新编号{1,2,,,p+1},将B序列重新编号,分别为B中的元素在A中对应出现的位置(没有的话就是0). 在样例中就是A = {1 7 ...
- BZOJ3674: 可持久化并查集加强版
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3674 题解:主要是可持久化的思想.膜拜了一下hzwer的代码后懂了. 其实本质是可持久化fa数 ...
- 打印机C++
m_prnDC.SetMapMode(MM_LOMETRIC); m_iPrnX = m_prnDC.GetDeviceCaps(HORZRES);m_iPrnY = m_prnDC.GetDevi ...
- 浅析Android中的消息机制(转)
在分析Android消息机制之前,我们先来看一段代码: public class MainActivity extends Activity implements View.OnClickListen ...
- Java中SynchronizedMap与ConcurrentHashMap的对比
如何使用 概述 ConcurrentHashMap: 线程安全: 其将整个Hash桶进行了分段segment,也就是将这个大的数组分成了几个小的片段segment,而且每个小的片段segment上面都 ...
- sort方法的使用、随机数的产生
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序. var arr = ['a','b','m','c','d']; arr.sort(); ...
- 最全的PHP开发Android应用程序
第一部分是指在Android系统的手机上直接写PHP脚本代码并立即运行: 第二部分则继续讲解如何把写好的PHP脚本代码打包成akp安装文件. 首先,在手机上安装两个apk包. 一个是SL4A(Scri ...
- Java核心 --- 泛型
CoreJava 泛型 java泛型的出现避免了强制类型转换,便于代码更好的被阅读 本文的写作参照了张孝祥的泛型介绍:http://www.itcast.cn/news/dbfd20f1/f4b1/4 ...