动态增加表格

tianke66

浏览: 188083 次
性别:
来自: 西安

最近访客更多访客>>

youlixishia

my20062105504

OvO海风OvO

t123537598

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (141)

社区版块

存档分类

JavaScript Bean Struts CSS JSP

<%@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();
}

</script>
</head>

<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>

<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">
                
                <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">
                
                <sp:cashtext2 style="width:90px;text-align:right;" name="zhi" className="textInput"/>
              </td>
            </tr>
            </tbody>
          </table>
  </div>
  </div>
</body>
</html>