📄 增删单元格示例2.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0048)http://fason.nease.net/zhuanti/table/sample2.htm -->
<!-- saved from url=(0051)http://jkisjk.vip.sina.com/code/html/detailkeep.htm --><HTML><HEAD><TITLE>动态明细示例</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>TD {
FONT-SIZE: 12px
}
INPUT {
FONT-SIZE: 12px
}
</STYLE>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY bgColor=#eeeeee>
<FORM name=frm method=post>
<TABLE
style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
align=center>
<TBODY>
<TR>
<TD
bgColor=#cccccc>说明：<BR>几乎所有的应用网站，都会有动态明细的处理，似乎不同的公司有不同的做法，<BR>1.先设定某些隐藏的明细，然后动态的显示隐藏，<BR>2.将动态明细放在一个multiple=ture的select里，选中一笔明细时将其相关值取出放在旁边修改<BR>3.动态增加HTML对象<BR>4.用一些控件<BR>等等<BR>在这几种里，如果数据量大(上千上万条)的，似乎只有第2种可以胜任，但是它也有自己的缺点：操作性不咋地；<BR>第4种(JK也不怎么了解)操作性与数据量都比较理想，可惜要修改安全设置，并且对使用控件的程序员也有了新的要求，控件的柔性有限，大家也很少使用。<BR>相对来说，只要数据量在一千条以内(整个页的input不超过10000)，第三种可能更合适，程序也不算很烦，可以模块化，操作性也还过得去。<BR><BR>本例采用第3种方法。功能有：<BR>1.数据导入导出框：数据导入导出时用到<BR>2.默认值行：输入新增行的预设值，按条件选择记录，一次修改多行时用到<BR>3.增加：复制预设行，增加到最后<BR>4.拆分：复制选中行，增加到选中行后面<BR>5.删除：删除选中行<BR>6.批选：选中所有满足条件的记录(如果没有条件，就全选)，或取消选择<BR>7.自动加行：在最后一笔明细里输入向下键，自动增加一行<BR>8.批改：将选中列的预设值填入到所有的选中行的相应列里去<BR>9.提取：将选中行、选中列的信息导出到数据导入导出框<BR>10.填充：将数据导入导出框的信息导出到选中行、选中列里去<BR>11.动态明细在页面离开时保存，返回页面时这些信息还在(比如说存盘失败可以返回，其实实现方法很简单，可惜很多JS程序员以为只能用Cookie来近似实现)<BR><BR>另外需要说明的是：直接使用本例是没有任何意义的，不过有几个功能有普遍用途。比如<FONT
color=blue>上下键控制</FONT>与<FONT color=blue>动态明细保存</FONT>
</TD></TR></TBODY></TABLE>
<TABLE borderColor=#cccccc width="100%" align=center border=1>
<TBODY>
<TR>
<TD width=500><TEXTAREA style="WIDTH: 100%" name=theDetailInfTextarea rows=3></TEXTAREA>
</TD>
<TD align=right><INPUT class=bottom onclick=addDetailProcess(); type=button value=增加>
<INPUT class=bottom onclick=copyDetailProcess(); type=button value=拆分>
<INPUT class=bottom onclick=delDetailProcess(); type=button value=删除>
<INPUT class=bottom onclick=document.frm.submit(); type=button value=完成>
<BR>批选<INPUT onclick=selectDetailProcess(this.checked);
type=checkbox> 自动加行<INPUT type=checkbox
name=autoAddDetailCheckbox> <INPUT class=bottom onclick=modifyDetailProcess(); type=button value=批改>
<INPUT class=bottom onclick=getDetailInfProcess(); type=button value=提取>
<INPUT class=bottom onclick=setDetailInfProcess(); type=button value=填充>
</TD></TR></TBODY></TABLE>
<DIV id=thedetailtableDIV width="100%">
<TABLE onkeydown=keyDownControl(event.srcElement) borderColor=#cccccc
width="100%" align=center border=1>
<TBODY id=tbDetailPrepare>
<TR>
<TD><INPUT type=checkbox name=record_select></TD>
<TD><INPUT name=detail_id></TD>
<TD><INPUT name=detail_name></TD></TR></TBODY>
<TBODY>
<TR id=trDetailTitles bgColor=#eeeeee>
<TD><INPUT onclick=selectallcheckbox(this) type=checkbox></TD>
<TD>明细ID<INPUT type=checkbox name=colbox_detail_id></TD>
<TD>明细NAME<INPUT type=checkbox name=colbox_detail_name></TD></TR>
<TBODY id=tbDetailUsed>
<TR>
<TD><INPUT type=checkbox name=record_select></TD>
<TD><INPUT name=detail_id></TD>
<TD><INPUT name=detail_name></TD></TR>
<TR height=0>
<TD colSpan=100 height=0>合计</TD></TR></TBODY></TABLE></DIV></FORM><INPUT
type=hidden name=theHistoryRecord>
<SCRIPT language=javascript> window.onload = historyOncemore; window.onbeforeunload = fixHistory; function fixHistory() //记住历史 { document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(/\n/g,""); } function historyOncemore() //恢复历史 { if (document.all("theHistoryRecord").value!="") {document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value; } } function selectallcheckbox(obj) //全选或全不选 { var tureorfalse=obj.checked; var theDetail=tbDetailUsed.rows; for(var i=0;i<theDetail.length-1;i++) { theDetail[i].all("record_select").checked=tureorfalse; } } function addDetailProcess(afterRowIndex) //增加明细 { var alltbDetailUsed= document.all("tbDetailUsed").rows; var theFirstSelectedDetail; if (afterRowIndex==null) { for(var i=0;i<alltbDetailUsed.length-1;i++) { if (alltbDetailUsed[i].all("record_select").checked==true) {theFirstSelectedDetail=i;break;} } if (theFirstSelectedDetail==null) {theFirstSelectedDetail=alltbDetailUsed.length-2;} } else theFirstSelectedDetail=afterRowIndex; var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true); var desRow = alltbDetailUsed[theFirstSelectedDetail+1]; desRow.parentElement.insertBefore(newRow,desRow ); } function copyDetailProcess() //拆分明细 { var alltbDetailUsed= document.all("tbDetailUsed").rows; var theFirstSelectedDetail; for(var i=0;i<alltbDetailUsed.length-1;i++) { if (alltbDetailUsed[i].all("record_select").checked==true) {theFirstSelectedDetail=i;break;} } if (theFirstSelectedDetail==null) {alert("拆分操作之前请先选择一笔明细！");return false;} var newRow = alltbDetailUsed[theFirstSelectedDetail].cloneNode(true); var desRow = alltbDetailUsed[theFirstSelectedDetail+1]; desRow.parentElement.insertBefore(newRow,desRow ); } function delDetailProcess() //删除明细 { var alltbDetailUsed= document.all("tbDetailUsed").rows; if (confirm("确定选择正确并且要将这些明细删除")==false) return false; for(var i=0;i<alltbDetailUsed.length-1;i++) { if (alltbDetailUsed[i].all("record_select").checked==true) { document.all("tbDetailUsed").deleteRow(i); i=i-1; } } } function modifyDetailProcess() //批量修改 { var i=0; var j=0; var k=0; var theSelectedColName=new Array(); var theSelectedColValue=new Array(); var theColboxs=document.all("trDetailTitles").getElementsByTagName("input"); var theDetailPrepareTr=document.all("tbDetailPrepare").rows[0]; for (j=1;j<theColboxs.length;j++) { if ((theColboxs[j].name.substr(0,7)=="colbox_")&&theColboxs[j].checked) { theSelectedColName[theSelectedColName.length]=theColboxs[j].name.substr(7,100); theSelectedColValue[theSelectedColValue.length]=theDetailPrepareTr.all(theColboxs[j].name.substr(7,100)).value; } } if (theSelectedColName.length==0) {alert("您没有选择需要修改的列！");return false;} if (!confirm("真的要批量修改？")) return false; var alltbDetailUsed= document.all("tbDetailUsed").rows; for(var i=0;i<alltbDetailUsed.length-1;i++) { if (alltbDetailUsed[i].all("record_select").checked) { for (j=0;j<theSelectedColName.length;j++) { alltbDetailUsed[i].all(theSelectedColName[j]).focus(); alltbDetailUsed[i].all(theSelectedColName[j]).value=theSelectedColValue[j]; alltbDetailUsed[i].all(theSelectedColName[j]).select(); } } } } function getDetailInfProcess() //提取 { var i=0; var j=0; var theSelectedColName=new Array(); var theSelectedColValue=new Array(); var theColboxs=document.all("trDetailTitles").getElementsByTagName("input"); var theDetailInf=""; for (j=1;j<theColboxs.length;j++) { if ((theColboxs[j].name.substr(0,7)=="colbox_")&&theColboxs[j].checked) { theSelectedColName[theSelectedColName.length]=theColboxs[j].name.substr(7,100); } } if (theSelectedColName.length==0) {alert("您没有选择提取列！");return false;} var alltbDetailUsed= document.all("tbDetailUsed").rows; for(var i=0;i<alltbDetailUsed.length-1;i++) { if (alltbDetailUsed[i].all("record_select").checked) { for (j=0;j<theSelectedColName.length;j++) { theDetailInf=theDetailInf+alltbDetailUsed[i].all(theSelectedColName[j]).value+";"; } theDetailInf=theDetailInf+"\n"; } } document.all("theDetailInfTextarea").innerText=theDetailInf; } function setDetailInfProcess() //填充 { var i=0; var j=0; var theSelectedColName=new Array(); var theColboxs=document.all("trDetailTitles").getElementsByTagName("input"); var alltbDetailUsed= document.all("tbDetailUsed").rows; var theDetailInf=""; var theColsNum=0; var theRowsNum=0; for (j=1;j<theColboxs.length;j++) { if ((theColboxs[j].name.substr(0,7)=="colbox_")&&theColboxs[j].checked) { theSelectedColName[theSelectedColName.length]=theColboxs[j].name.substr(7,100); } } if (theSelectedColName.length==0) {alert("您没有选择填充列！");return false;} theColsNum=theSelectedColName.length; theDetailInf=document.all("theDetailInfTextarea").innerText.replace(/\t/g,";"); if(theDetailInf.length==0) { alert("没有信息可以填充"); return false; } var theDetailInfRow=theDetailInf.split("\n"); var theDetailInfCell; theRowsNum=theDetailInfRow.length; if(theRowsNum>1000) theRowsNum=1000; for(i=0;i<theRowsNum;i++) { theDetailInfCell=theDetailInfRow[i].split(";"); if (theDetailInfCell.length<theColsNum) break; } theRowsNum=i; if(!confirm("填充行数为"+theRowsNum+"；填充列数为"+theColsNum+"\n请确认！")) return false; k=0; for(var i=0;(i<alltbDetailUsed.length-1)&&(k<theRowsNum);i++) { if (alltbDetailUsed[i].all("record_select").checked) { theDetailInfCell=theDetailInfRow[k++].split(";"); for (j=0;j<theSelectedColName.length;j++) { alltbDetailUsed[i].all(theSelectedColName[j]).focus(); alltbDetailUsed[i].all(theSelectedColName[j]).value=theDetailInfCell[j]; alltbDetailUsed[i].all(theSelectedColName[j]).select(); } } } } function selectDetailProcess(trueOrFalse) //按条件批量选中 { if (trueOrFalse!=false) trueOrFalse=true; var i=0; var j=0; var theSelectedColName=new Array(); var theSelectedColValue=new Array(); var theColboxs=document.all("trDetailTitles").getElementsByTagName("input"); var theDetailPrepareTr=document.all("tbDetailPrepare").rows[0]; for (j=1;j<theColboxs.length;j++) { if ((theColboxs[j].name.substr(0,7)=="colbox_")&&theColboxs[j].checked) { theSelectedColName[theSelectedColName.length]=theColboxs[j].name.substr(7,100); theSelectedColValue[theSelectedColValue.length]=theDetailPrepareTr.all(theColboxs[j].name.substr(7,100)).value; } } var alltbDetailUsed= document.all("tbDetailUsed").rows; for(var i=0;i<alltbDetailUsed.length-1;i++) { var theTrWillBeSelected=true; for (j=0;j<theSelectedColName.length;j++) { if (alltbDetailUsed[i].all(theSelectedColName[j]).value!=theSelectedColValue[j]) { theTrWillBeSelected=false;break; } } if (theTrWillBeSelected) alltbDetailUsed[i].all("record_select").checked=trueOrFalse; } } function keyDownControl(obj) //用于控制明细里的上下键。只控制input { if(obj.tagName!="INPUT"||obj.name=="") return true; k=event.keyCode; if(!(k==38||k==40)) return true; var theSamenameInputs=document.all(obj.name); var i=0; if (theSamenameInputs.length>1) { for (i=0;i<theSamenameInputs.length;i++) { if (theSamenameInputs[i]==obj) break; } } if((i==theSamenameInputs.length-1)&&(k==40)) { if(document.all("autoAddDetailCheckbox")!=null&&document.all("autoAddDetailCheckbox").checked) addDetailProcess(theSamenameInputs.length-2); } if((i>0)&&(k==38)) { theSamenameInputs[i-1].select(); theSamenameInputs[i-1].focus(); event.returnValue=false; return false; } if((i<theSamenameInputs.length-1)&&(k==40)) { theSamenameInputs[i+1].select(); theSamenameInputs[i+1].focus(); event.returnValue=false; return false; } }</SCRIPT>
<P align=right><A href="http://fason.nease.net/">【阿信的小天地】</A></P></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -