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运行效果如下：
上三行和下三行运行效果如下：
里面写的都很详细，有什么不懂的大家可以问我。多多提出问题。