js上三行下三行和添加多个附件
1 function addTr(num) { 2 no ++; 3 var obj = document.getElementById(tableID); 4 var oneRow = obj.insertRow(num); 5 var cells = new Array(); 6 for (i = 0; i < 24; i ++) { 7 cells[i] = oneRow.insertCell(i); 8 } 9 cells[0].innerHTML = no; 10 cells[1].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" id="COMPANYEVENTID_' + no+'" dataType="Require" msg="管理处名称为必填项" readonly></textarea>'+ 11 '<input type="hidden" id="DEPARTMENTID_' + no+'" name="stationObject" value="">'; 12 cells[2].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" id="LINELOOPNAME_' + no+'" dataType="Require" msg="管道名称为必填项" readonly></textarea>'+ 13 '<input type="hidden" id="LINELOOPEVENTID_' + no+'" name="stationObject" onpropertychange="getLineMessage(' + no+')">'; 14 cells[3].innerHTML = '<input type="text" class="input_bg" name="stationObject" id="DIAMETER_' + no+'" dataType="Require" msg="管径为必填项">'; 15 cells[4].innerHTML = '<input type="text" class="input_bg" name="stationObject" id="PIPELINEDISTANCES_' + no+'" dataType="Double" require="true" msg="管道长度为必填项并且为正数" maxlength="20">'; 16 cells[5].innerHTML = '<input type="text" class="input_bg" name="stationObject" id="DESIGNPRESSURE_' + no+'" dataType="Require" msg="设计压力为必填项">'; 17 cells[6].innerHTML = '<input type="text" class="input_bg" name="stationObject" id="USETIME_' + no+'" dataType="Require" msg="投产时间为必填项">'; 18 cells[7].innerHTML = '<input type="text" class="input_bg" readonly id="PRODUCTTYPE_' + no+'" name="stationObject">'; 19 cells[8].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" id="BEGINSITENAME_' + no+'" readonly dataType="Require" msg="上游站场为必填项"></textarea>'+ 20 '<input type="hidden" name="stationObject" id="BEGINSITEEVENTID_' + no+'">'+ 21 '<input type="hidden" name="stationObject" id="BEGINSTATIONSERIESEVENTID_' + no+'">'+ 22 '<input type="hidden" name="stationObject" id="BEGINSTATION_' + no+'" onpropertychange="getinsplength('+no+')">'; 23 cells[9].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" id="ENDSITENAME_' + no+'" readonly dataType="Require" msg="下游站场为必填项"></textarea>'+ 24 '<input type="hidden" name="stationObject" id="ENDSITEEVENTID_' + no+'">'+ 25 '<input type="hidden" name="stationObject" id="ENDSTATIONSERIESEVENTID_' + no+'">'+ 26 '<input type="hidden" name="stationObject" id="ENDSTATION_' + no+'" onpropertychange="getinsplength('+no+')">'; 27 cells[10].innerHTML = '<input type="text" class="input_bg" id="disbetween_'+no+'" name="stationObject" value="" dataType="Double" require="true" msg="站间长度为必填项并且为正数" maxlength="20">'; 28 cells[11].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>'; 29 cells[12].innerHTML = '<input type="text" class="input_bg" readOnly name="stationObject" value="" onfocus="new WdatePicker(this, \'%Y\',false)" dataType="Require" msg="检测完成时间为必填项">'; 30 cells[13].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>'; 31 cells[14].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>'; 32 cells[15].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>'; 33 cells[16].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>'; 34 cells[17].innerHTML = '<input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用为必填项并且为正数" maxlength="20">'; 35 cells[18].innerHTML = '<input type="text" class="input_bg" readOnly name="stationObject" value="" onfocus="new WdatePicker(this, \'%Y\',false)" dataType="Require" msg="检测时间为必填项">'; 36 cells[19].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>'; 37 cells[20].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" require="false" dataType="Limit" max="500" msg="备注在250字内"></textarea>'; 38 cells[21].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" require="true" dataType="Limit" max="500" msg="需满足的检测条件为必填项并且在250字内"></textarea>'; 39 cells[22].innerHTML = '<textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea>'; 40 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)">'; 41 setNumber(); 42 } 43 function deleteTr(obj, index) { 44 obj.deleteRow(index); 45 } 46 function reMoveTr(num) { 47 var rows = (document.getElementsByName(inputNames).length - behind - before) / inputColnum; 48 if (rows > 1) { 49 deleteTr(document.getElementById(tableID), num); 50 setNumber(); 51 } else { 52 alert('至少保留一组数据！'); 53 } 54 } 55 function getRowIndex(obj) { 56 var table = document.getElementById(tableID); 57 obj = obj.offsetParent; 58 var index = 0; 59 for (var i = beforeRows; i < table.rows.length - behindRows; i ++) { 60 for (var j = 0; j < table.rows(i).cells.length; j ++) { 61 if (table.rows(i).cells(j) == obj) { 62 index = i; 63 } 64 } 65 } 66 return index; 67 } 68 // 设置行编号 69 function setNumber() { 70 var num = 0; 71 var table = document.getElementById(tableID); 72 for (var i = beforeRows; i < table.rows.length - behindRows; i ++){ 73 num ++; 74 var tdObj = table.rows(i).cells(0); 75 tdObj.innerHTML = num; 76 } 77 }
1 function addTR(){ 2 var table = document.getElementById(fileTableID); 3 var length = table.rows.length; 4 if ( fileMaxCount!=-1 && length-1 > fileMaxCount) { 5 alert("最多上传10个附件！"); 6 return; 7 } 8 var oRow1 = upLoadTable.insertRow(length); 9 var aCells = oRow1.cells; 10 var oCell1_1 = oRow1.insertCell(aCells.length); 11 var oCell1_2 = oRow1.insertCell(aCells.length); 12 var oCell1_3 = oRow1.insertCell(aCells.length); 13 var oCell1_4 = oRow1.insertCell(aCells.length); 14 var oCell1_5 = oRow1.insertCell(aCells.length); 15 oCell1_1.width = "14%"; 16 oCell1_1.className="td_text"; 17 oCell1_2.width = "34%"; 18 oCell1_2.className="td_element"; 19 oCell1_3.width = "16%"; 20 oCell1_3.className="td_text"; 21 oCell1_4.width = "25%"; 22 oCell1_4.className="td_element"; 23 oCell1_5.width = "9%"; 24 oCell1_5.className="td_element"; 25 oCell1_2.id = "tdFile" + annex; 26 oCell1_1.innerHTML = "附件"+annex+":"; 27 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'/>"; 28 oCell1_3.innerHTML = "描述:"; 29 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个字之内'/>" 30 oCell1_5.innerHTML = "<input class='button_bg' type='button' value='删除' onclick='deleteTR(this)'>" ; 31 annex++; 32 desinfoid++; 33 } 34 function deleteTR(obj) { 35 var rowIndex = obj.parentElement.parentElement.rowIndex; 36 if (rowIndex > -1){ 37 upLoadTable.deleteRow(rowIndex); 38 annex--; 39 setNumber(); 40 } 41 } 42 43 function setNumber() { 44 var num = 0; 45 var table = document.getElementById(fileTableID); 46 for (var i = fileBeforeRows; i < table.rows.length - fileBehindRows; i ++) { 47 num ++; 48 var tdObj = table.rows(i).cells(0); 49 tdObj.innerHTML = "附件"+num+":"; 50 } 51 } 52 function onLoadTr(num) { 53 for (var i = 0; i < num; i++) {; 54 addTR(); 55 } 56 } 57 function chkSize (obj,id) { 58 var ext = obj.value; 59 var ss = ext.split('.'); 60 var strs = ext.split('\\'); 61 var exts=document.getElementById("exts").value; 62 if (exts.indexOf(ss[ss.length - 1].toLowerCase()) == -1) { 63 alert("您上传的文件不符合格式要求，不允许上传！"); 64 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'/>"; 65 document.getElementById('desinfo' + id).readOnly = true; 66 }else if(strs[strs.length - 1].length > 50){ 67 alert("文件名不能超过50个字！"); 68 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'/>"; 69 document.getElementById('desinfo' + id).readOnly = true; 70 }else { 71 document.getElementById('desinfo' + id).readOnly = false; 72 } 73 }
1 <html> 2 <head> 3 <title> New Document </title> 4 <link rel="stylesheet" href="complex.css" type="text/css"></link> 5 <script type="text/javascript" src="insert.js"></script> 6 <script type="text/javascript" language="javascript" src="insertfile.js"></script> 7 </head> 8 9 <body scroll="no"> 10 <table class="editable" style="width:100%" cellpadding="0" cellspacing="1" id="reportFrame1"> 11 <tr> 12 <td width="1%" rowspan=2>序号</td> 13 <td width="5.5%" rowspan=2>管理处名称</td> 14 <td width="5.5%" rowspan=2>管道名称</td> 15 <td width="4.5%" rowspan=2>管径(mm)</td> 16 <td width="4.5%" rowspan=2>管道(管段)长度(km)</td> 17 <td width="4.5%" rowspan=2>设计压力MPa</td> 18 <td width="3.5%" rowspan=2>投产时间</td> 19 <td width="4.5%" rowspan=2>输送介质</td> 20 <td width="15.5%" colspan=3>站间段(按可收发球站间逐个填写)</td> 21 <td width="33.5%" colspan=7>内检测历史</td> 22 <td width="9%" colspan=2>基线或再检测计划</td> 23 <td width="5.5%" rowspan=2>备注</td> 24 <td width="5.5%" rowspan=2>需满足的检测条件(如输量范围)</td> 25 <td width="4.5%" rowspan=2>生产运行是否满足</td> 26 <td width="1%" rowspan=2></td> 27 </tr> 28 <tr> 29 <td width="5.5%">上游站名称</td> 30 <td width="5.5%">下游站名称</td> 31 <td width="4.5%">站间长度(km)</td> 32 <td width="4.5%">有无内检测历史</td> 33 <td width="4.5%">检测完成时间(年)</td> 34 <td width="5.5%">检测方法</td> 35 <td width="5.5%">检测承担单位</td> 36 <td width="4.5%">检测器类型</td> 37 <td width="4.5%">检测器精度</td> 38 <td width="4.5%">检测费用(万元)</td> 39 <td width="3.5%">检测时间(年)</td> 40 <td width="5.5%">建议检测方法</td> 41 </tr> 42 <tr> 43 <td>1</td> 44 <td><textarea class="textarea" rows="2" name="stationObject" id="COMPANYEVENTID" dataType="Require" msg="管理处名称为必填项" readonly></textarea> 45 <input type="hidden" id="DEPARTMENTID" name="stationObject" value=""></td> 46 <td><textarea class="textarea" rows="2" name="stationObject" id="LINELOOPNAME" dataType="Require" msg="管道名称为必填项" readonly></textarea> 47 <input type="hidden" id="LINELOOPEVENTID" name="stationObject" onpropertychange="getLineMessage()"></td> 48 <td><input type="text" class="input_bg" name="stationObject" id="DIAMETER" value="" dataType="Require" msg="管径为必填项"></td> 49 <td><input type="text" class="input_bg" name="stationObject" id="PIPELINEDISTANCES" value="" dataType="Double" require="true" msg="管道长度为必填项并且为正数" maxlength="20"></td> 50 <td><input type="text" class="input_bg" name="stationObject" id="DESIGNPRESSURE" value="" dataType="Require" msg="设计压力为必填项"></td> 51 <td><input type="text" class="input_bg" name="stationObject" id="USETIME" dataType="Require" msg="投产时间为必填项"></td> 52 <td><input type="text" class="input_bg" readonly id="PRODUCTTYPE" name="stationObject"></td> 53 <td><textarea class="textarea" rows="2" name="stationObject" id="BEGINSITENAME" readonly dataType="Require" msg="上游站场为必填项"></textarea> 54 <input type="hidden" name="stationObject" id="BEGINSITEEVENTID"/> 55 <input type="hidden" name="stationObject" id="BEGINSTATIONSERIESEVENTID" /> 56 <input type="hidden" name="stationObject" id="BEGINSTATION" onpropertychange="getinsplength()"/></td> 57 <td><textarea class="textarea" rows="2" name="stationObject" id="ENDSITENAME" readonly dataType="Require" msg="下游站场为必填项"></textarea> 58 <input type="hidden" name="stationObject" id="ENDSITEEVENTID"/> 59 <input type="hidden" name="stationObject" id="ENDSTATIONSERIESEVENTID" /> 60 <input type="hidden" name="stationObject" id="ENDSTATION" onpropertychange="getinsplength()"/></td> 61 <td><input type="text" class="input_bg" id="disbetween" name="stationObject" value="" dataType="Double" require="true" msg="站间长度为必填项并且为正数" maxlength="20"></td> 62 <td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td> 63 <td><input type="text" class="input_bg" readOnly name="stationObject" value="" onfocus="new WdatePicker(this, '%Y',false)" dataType="Require" msg="检测完成时间为必填项"></td> 64 <td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td> 65 <td><textarea class="textarea" rows="2" name="stationObject" dataType="Require" msg="检测承担单位为必填项"></textarea></td> 66 <td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td> 67 <td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td> 68 <td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td> 69 <td><input type="text" class="input_bg" readOnly name="stationObject" value="" onfocus="new WdatePicker(this, '%Y',false)" dataType="Require" msg="检测时间为必填项"></td> 70 <td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td> 71 <td><textarea class="textarea" rows="2" name="stationObject" require="false" dataType="Limit" max="500" msg="备注在250字内"></textarea></td> 72 <td><textarea class="textarea" rows="2" name="stationObject" require="true" dataType="Limit" max="500" msg="需满足的检测条件为必填项并且在250字内"></textarea></td> 73 <td><input type="text" class="input_bg" name="stationObject" value="" dataType="Double" require="true" msg="检测费用必填项并且为正数" maxlength="20"></td> 74 <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> 75 </tr> 76 </table> 77 <input type="hidden" name="exts" value="txt,doc,docx,pdf,xls,xlsx,rar,zip,jpg,jpeg,gif,png,bmp"> 78 <table class="editable" style="width:100%" cellpadding="0" cellspacing="1" id="upLoadTable"> 79 <tr> 80 <td width="14%" style="font-weight:bold;text-align:right">文档附件</td> 81 <td width="86%" colspan="4"> 82 <span class="xuxian_td" style="width:'99%';align:right; margin-left:0px;padding-left:0px;"> 83 <p align="right"> 84 <input name="insertf" class="button_bg" type="button" style="width:72px;align:right;margin-right:-2px;padding-right:-2px;" value="添加附件" onClick="addTR()"> 85 </p> 86 </span> 87 </td> 88 </tr> 89 <tr> 90 <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> 91 </tr> 92 </table> 93 </body> 94 <script type="text/javascript"> 95 <!-- 96 var no = 1; 97 var before = 0;//*前面有多少个input 98 var behind = 0;//*后面有多少个input 99 var beforeRows = 2;//*自动增长行前面有多少行 100 var behindRows = 0;//*自动增长行后面有多少行 101 var inputColnum = 30;//要添加多少个input 102 var inputNames = 'stationObject'; 103 var tableID = 'reportFrame1'; 104 //附件上传 105 var annex = 1; 106 var fileBeforeRows = 2;//*自动增长行前面有多少行 107 var fileBehindRows = 0;//*自动增长行后面有多少行 108 var fileMaxCount = 10;//*所允许上传的最大附件个数 109 var fileTableID = 'upLoadTable';//* 110 var desinfoid = 1; 111 //--> 112 </script> 113 </html>
好长时间没有写博文了，现在分享一下最近一段时间做的关于javascript的代码，上三行下三行js和添加多附件js。给大家分享一下。
添加多附件js运行效果如下：
上三行和下三行运行效果如下：
里面写的都很详细，有什么不懂的大家可以问我。多多提出问题。
