现在的位置: 首页 > 综合 > 正文

动态增加表格

2013年11月27日 ⁄ 综合 ⁄ 共 7979字 ⁄ 字号 评论关闭

<%@page language="java" contentType="text/html; charset=utf-8"%>
<%@taglib uri="/tags/struts-html" prefix="html"%>
<%@taglib uri="/tags/struts-logic" prefix="logic"%>
<%@taglib uri="/tags/struts-bean" prefix="bean"%>
<%@taglib uri="/tags/spsoft" prefix="sp" %>
<%@page import="java.math.BigDecimal"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<jsp:include page="/global/head.jsp"/>
<title>明细</title>
<link href="<%=request.getContextPath()%>/global/css/layout.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<%=request.getContextPath()%>/global/js/openPopWin.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/global/js/scrollmenu.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/global/scripts/cash.js"></script>
<script language="javascript">
var selTr;
//初始化属性
function init(){

}

//添加一行
function addTr(type){ 
  var tr = document.getElementById( "oTbody" ).childNodes[0];
  var newTr = tr.cloneNode(true);
  var length = document.getElementById( "oTbody" ).childNodes.length;

  newTr.getAttributeNode("id").nodeValue += length;
  newTr.style.display = "";
 
  newTr.onclick=function(){
    selTr=newTr;
  } 
 
  length=length+1;
  newTr.childNodes[0].getElementsByTagName("input")[0].value=length;

  newTr.childNodes[2].getElementsByTagName("input")[1].onchange=function(){
    var otherzhi=new Number(document.getElementById( "other" ).value);
    var oldzhi=new Number(newTr.childNodes[2].getElementsByTagName("input")[0].value);
    var zhi=new Number(newTr.childNodes[2].getElementsByTagName("input")[1].value);
    //alert(zhi);
    //alert(otherzhi+oldzhi-zhi);
    if(zhi<0){   
      spAlert("明细值不能为负数!");
      newTr.childNodes[2].getElementsByTagName("input")[1].value="";
      newTr.childNodes[2].getElementsByTagName("input")[1].focus();        
    }
    if(otherzhi+oldzhi-zhi>0){
      document.getElementById( "other" ).value=otherzhi+oldzhi-zhi;   
    }else{
      spAlert("明细值过大!");     
      newTr.childNodes[2].getElementsByTagName("input")[1].value="";
      newTr.childNodes[2].getElementsByTagName("input")[1].focus();   
    }   
  }
 
  var trs = document.getElementById( "oTbody" ).rows.length;
  if(selTr!= null&&type==2&&(selTr.rowIndex+1!=trs)){
   var firsttr = selTr.nextSibling;
   firsttr.insertAdjacentElement ("beforeBegin",newTr);
  }else
     document.getElementById( "oTbody" ).appendChild(newTr);
}

//删除选中的行
function delTr(){
  if( selTr == null ){
    spAlert( "请选择删除行!" );
    return;
  }
  //修改值
  var oldzhi=new Number(document.getElementById( "other" ).value);
  var zhi=new Number(selTr.childNodes[2].getElementsByTagName("input")[0].value);
  document.getElementById( "other" ).value=oldzhi+zhi;  
 
  //删除
  selTr.parentNode.removeChild(selTr);
  selTr = null;
 
  //修改序号
  var length = document.getElementById( "oTbody" ).childNodes.length;
  for(i=0;i<length;i++){
    var tr = document.getElementById( "oTbody" ).childNodes[i];   
    tr.getElementsByTagName("input")[0].value=i+1;
  }
}

//退出
function exit(){
       alert("退出123");
//     this.opener.location.reload();
//     window.close();  
}

function onOk(){   
    var oldzhi=new Number(document.getElementById( "other" ).value);   
    if(oldzhi<0){
      spAlert("其他项上的值必须>=0");
      return;
    }
    var length = document.getElementById( "oTbody" ).childNodes.length;
 for(i=1;i<length;i++){
    var tr = document.getElementById( "oTbody" ).childNodes[i];   
    if(tr.getElementsByTagName("input")[1].value==""){
      spAlert("必须填写摘要!");
      tr.getElementsByTagName("input")[1].focus();
         return;
    } 
    var zhi=new Number(tr.getElementsByTagName("input")[3].value); 
    if(zhi<0||tr.getElementsByTagName("input")[2].value==""){
      spAlert("每一行都必须有值!");
      tr.getElementsByTagName("input")[3].focus();
         return;
    }   
 }
 window.close();
}

</script>
</head>

<body class="bodyspace-frame" onunload="exit();" >

<!--  Begin of the tools_bar -->
<table width="100%" border="0" align="center"  valign="top" cellpadding="0" cellspacing="0" >
   <tr>
 <td  colspan="2" >
 <table width="100%"  height="40" class="bg_lowgreen" border="1" bordercolorlight="#006666" bordercolordark="#FFFFFF"  cellpadding="0" cellspacing="0" style="MARGIN:  3px 0px 3px 0px;">
 <tr align="left" >
       <td><div id="toolbar" style="padding:4px;">
      <div class="toolsiconarea" id="add" onclick="addTr(1)"> <span class="box"><a href="#"><img src="<%=request.getContextPath()%>/global/images/t_add.gif" width="18" height="18" ></a></span>
                  <div style="cursor:pointer;">添加</div>
              </div>
              <div class="toolsiconarea" id="delTr" onClick="delTr()"> <span class="box"><a href="#"><img src="<%=request.getContextPath()%>/global/images/t_sub.gif" width="18" height="18"></a></span>
                  <div style="cursor:pointer;">删除</div>
              </div>
       <div class="toolsiconarea" onclick="onOk()"> <span class="box"><a href="#"><img src="<%=request.getContextPath()%>/global/images/tools_ok.gif" width="18" height="19"></a></span>
     <div style="cursor:pointer;">确定</div>
    </div>
    </div>
      </td>
       </tr>
      </table>    
      </td>
  </tr>
  </table>
<!--  End of the tools_bar -->

 <!--显示记录表单-->
  <div  align="center" style="overflow:auto; width:100%; height:555px; border:1px solid #cccccc;" >       
          <table width="100%" height="69" border="0" cellpadding="0" cellspacing="0">
              <tr>             
                <td width="30%">
                <div align="left">现金预算项目</div>
    </td>
                <td width="30%"><div align="left"></div></td>
                <td width="30%"><div align="left"></div></td>              
              </tr>
              <tr>
                <td><div align="left">期间:
    <logic:equal name="budPrd" value="YY">
     年
    </logic:equal>
    <logic:equal name="budPrd" value="SE">
     季
    </logic:equal>
    <logic:equal name="budPrd" value="MM">
     月
    </logic:equal>
    <logic:equal name="budPrd" value="WK">
     周
    </logic:equal>           
                </div></td>
                <td><div align="left">金额:<bean:write name='cashUnit'/></div></td>
                <td><div align="left">小数位数:<bean:write name='cashDecimal'/></div></td>                   
              </tr>
          </table>
          <div  style="overflow-y:scroll; width:100%; height:290px;" >
          <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#666666">
              <tr bgcolor="#FFFFFF">
                <td width="10%" height="40"><div align="center">序号</div></td>
                <td width="60%"><div align="center">摘要</div></td>
                <td width="30%"><div align="center">金额</div></td>
              </tr>
              <tr bgcolor="#FFFFFF">
                <td width="10%" height="20"><div align="center">1</div></td>
                <td width="60%"><div align="center">其他</div></td>
                <td width="30%">
                <div align="center">
                <!--
                <input type="text" name="other" class="textinput"  style="width:90;ime-mode: disabled;text-align:right" value="100" readonly/>
                 -->
                <sp:cashtext2 style="width:90px;text-align:right;" name="other" className="textInput" value="100"/>
                </div>
                </td>                       
                </tr>                      
          </table>         
          <table width="100%" border="0" align="left" cellpadding="0" cellspacing="1" bgcolor="#666666">                    
          <tbody id="oTbody" style="width:100%">
            <tr bgcolor="#FFFFFF" id="tr" search="false" style="display:none" delete="true">
              <td width="10%" align="center">
                <input id="rownum" type="text" class="textinput" style="width:20px;ime-mode: disabled;text-align:center" readonly>
              </td>
              <td width="60%" align="center">
                <input type="text" name="mingcheng" class="textinput" style="width:180;ime-mode: disabled;text-align:left" />               
              </td>
              <td width="30%" align="center">
                <!--
                <input type="text" name="zhi" class="textinput"  style="width:90;ime-mode: disabled;text-align:right"  />
                 -->
                <sp:cashtext2 style="width:90px;text-align:right;" name="zhi" className="textInput"/>
              </td>
            </tr>
            </tbody>
          </table>                
  </div>
  </div>
</body>
</html>
 

【上篇】
【下篇】

抱歉!评论已关闭.