效果图
htm代码
</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="../images/jquery-1.9.1.js"></script> <script type="text/javascript" src="../ajax/dataHandler.js"></script> <script type="text/javascript" src="../financeStatistics/debitCount.js"></script> <title></title> </head> <body> <p>客户划账记录</p> <!-- 查询区 --> <div> <input id="btnAdd" type="button" value="新增" οnclick="btnNewClick();"/> <input id="btnEdit" type="button" value="修改" οnclick="btnEditClick();"/> <input id="btnDelete" type="button" value="删除" οnclick="btnDeleteClick();"/> <br /> 公司:<select id="selectCompany" οnchange="selectCompanyOnChange()"> </select> 部门:<select id="selectDepart" οnchange="selectDepartOnChange()"> </select> 日期:<input id="txDateSearch" type="text" /> 送气编号/客户名称:<input id="txSearch" type="text" /> <input id="btnSearch" type="button" value="查询" οnclick="btnSaveClick();"/> </div> <!-- 统计报表区 --> <div> <table id="list"> <thead> <tr> <th class="style1" >选择</th> <th class="style1" >区域</th> <th class="style1" >站点</th> <th class="style1">送气编号</th> <th class="style1">客户名称</th> <th class="style1">划账金额</th> <th class="style1">划账银行</th> <th class="style1">划账日期</th> </tr> </thead> <tbody> <!-- 动态插入表格 --> </tbody> <tfoot> <!-- 动态页码 --> </tfoot> </table> </div> <!-- 详细信息的背景蒙板 --> <div class="mask"></div> <!-- 详细信息区 --> <div id="dlgInfo" class="pop_box"> <!-- 标题 --> <div class="pop_box_hd"> <h3>新增划账客户</h3><!-- 输入框标题 --> <div class="close_btn">×</div><!-- 关闭按钮 --> </div> <!-- 数据录入区 --> <div> <p><span>公司:</span><select id="selectCompanyDetail" οnchange="selectCompanyDetailOnChange()"> </select></p> <p><span>部门:</span><select id="selectDepartDetail" οnchange="selectDepartDetailOnChange()"> </select></p> <p><span>客户姓名:</span><select id="selectCustomer" οnchange="selectCustomerOnChange()"> </select></p> <p><span>送气编号:</span><select id="selectGasCode" οnchange="selectGasCodeOnChange()"> </select></p> <p><span>银行:</span><select id="selectBank"> </select></p> <p><span>划账金额:</span><input id="txDebit" type="text" /></p> <p><span>划账日期:</span><input id="txDate" type="text" /></p> </div> <!-- 按钮区 --> <div class="btn_box"> <div class="btn_box_inner cf"> <a href="#" id="btnSave" οnclick="btnSaveClick();" class="btn btn_mid btn_blue fl save_btn">保存</a> <a href="#" id="btnCancel" οnclick="btnCancelClick();" class="btn btn_mid btn_gray fl cancel_btn">取消</a> </div> </div> </div> </body> </html>JScript.js代码
var m_result; var m_str; var m_num1; //第一个数据 var m_num2; //第二个数据 var m_pos; //运算方式标志位 function onclickNum(nums) { m_str = document.getElementById("txResult"); m_str.value = m_str.value + nums; //显示数字 } function onclickClear() { m_str = document.getElementById("txResult").value; // $("#txResult").val(); m_str.value = ""; //清空数字 } /* function onclickadd() { pos = 1; num1 = str.value;//获取第一个数据 document.getElementById("txt").value = ""; //清除显示的第一个数据 } function onclickminus() { pos = 2; num1 = str.value; //获取第一个数据 document.getElementById("txt").value = ""; //清除显示的第一个数据 } */ function calculateClick(flag) { m_pos = flag; m_num1 = m_str.value; //获取第一个数据 document.getElementById("txResult").value = ""; //清除显示的第一个数据 } function onclickresult() { m_num2 = document.getElementById("txResult").value; switch (m_pos) { case (1): //加法 m_result = m_num1 * 1 + m_num2 * 1; break; case (2): //减法 m_result = m_num1 * 1 - m_num2 * 1; break; case (3): //乘法 m_result = m_num1 * 1 * m_num2 * 1; break; case (4): //除法 m_result = (m_num1 * 1) / (m_num2 * 1); break; default: break; } document.getElementById("txResult").value = m_result; }JScript.js代码