硬伤JS
Posted dong208
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了硬伤JS相关的知识，希望对你有一定的参考价值。
实例（新增/修改表单加列表）
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;background-color:white;">
<head>
<meta name="Copyright" content="" />
<%@include file="../../../jsp/title.jsp"%>
<jsp:include page="../../../jsp/top.jsp"></jsp:include>
<jsp:include page="../../../jsp/headCss.jsp"></jsp:include>
<style type="text/css">
a{
-webkit-tap-highlight-color:rgba(255,0,0,0);
}
</style>
</head>
<body class="horizontal-menu-page" style="height: 100%; background-color: white;" onload="load()">
<section>
<header class="panel-heading">
<span class="tools pull-right">
<img src="../images/return.png" title="返回" width="60px;" onclick="window.history.go(-1);">
</span>
</header>
<div id="dcMain">
<form class="layui-form" action="save.shtml" method="post" id="createForm" style="margin-top: 10px;">
<input type="hidden" name="o_id" value="${map[‘o_id‘]}" />
<input type="hidden" name="o_code" value="${map[‘o_code‘]}" />
<table align="center" border="0" style="line-height: 40px; text-align: right; margin: 0px auto; width: 800px;" class="display table table-bordered table-striped">
<tr>
<td colspan="4" style="text-align: center; font-size: 18px">添加订单</td>
</tr>
<tr>
<td><span style="color: red"></span>客户名称</td>
<td style="text-align: left;" colspan="3">
<div style="width: 180px;margin-left: 8px; ">
<select id="bs3Select" name="c_id" onchange="chooseCustom(this)" class="selectpicker show-tick form-control" data-live-search="true">
<option value="">请选择</option>
<c:forEach var="item" items="${cList}" varStatus="status">
<option value="${item.c_id}" <c:if test="${map[‘c_id‘]==item.c_id}">selected="selected"</c:if>>${item.c_weixin_name}</option>
</c:forEach>
</select>
<input type="hidden" id="cid" value="${map[‘c_id‘]}"/>
</div>
</td>
</tr>
<tr>
<td><span style="color: red"></span>收件人姓名</td>
<td style="text-align: left;">
<input type="text" style="margin-left: 8px; width: 180px;" id="get_name" name="get_name" value="${map[‘get_name‘]}" class="form-control middlesize ipt2" />
</td>
<td><span style="color: red"></span>收件人电话</td>
<td style="text-align: left;">
<input type="text" style="margin-left: 8px; width: 180px;" id="get_phone" name="get_phone" value="${map[‘get_phone‘]}" class="form-control middlesize ipt2" />
</td>
</tr>
<input type="hidden" style="margin-left: 8px; width: 593px;" id="c_discount" name="c_discount" value="${map[‘c_discount‘]}"/>
<tr>
<td><span style="color: red"></span>收件地址</td>
<td colspan="3" style="text-align: left;">
<input type="text" style="margin-left: 8px; width: 593px;" id="o_address" name="o_address" value="${map[‘o_address‘]}" class="form-control middlesize ipt2" />
</td>
</tr>
<tr>
</tr>
</table>
<div class="col-md-4" style="width: 100%;">
<div class="row">
<div class="col-md-12">
<section class="panel">
<header class="panel-heading">购买商品
<span class="tools pull-right">
<a href="javascript:;" rel="external nofollow" id="AddMoreFileBox" class="btn btn-info" style="">
<img src="../images/addmage.png" onclick="addTr()" style="width: 15px;">
</a>
<a class="fa fa-chevron-down" href="javascript:;"></a>
</span>
</header>
<div class="panel-body">
<table align="center" border="0" style="line-height: 40px; text-align: right; margin: 0px auto; width: 90%;" class="display table table-bordered table-striped">
<tr>
<td style="text-align: center; width: 5%;">序号</td>
<td style="text-align: center; width: 15%;">商品类别</td>
<td style="text-align: center; width: 15%;">商品名称</td>
<td style="text-align: center; width: 15%;">单价</td>
<td style="text-align: center; width: 15%;">数量</td>
<td style="text-align: center; width: 15%;">规格</td>
<td style="text-align: center; width: 15%;">总价</td>
<td style="text-align: center; width: 5%;">删除</td>
</tr>
<!-- 判断+循环 -->
<c:if test="${type == 2}">
<c:forEach var="oiItem" items="${oiList}" varStatus="status">
<tr id="">
<td align="center" style="width: 5%;">${status.index+1}</td>
<td style="width: 15%;">
<select style="width: 100%;" class="form-control middlesize ipt2" onchange="selectType(${status.index+1});" name="p_type_${status.index+1}" id="p_type_${status.index+1}">
<option value="">请选择</option>
<c:forEach var="item" items="${ptList}" >
<option <c:if test="${item.pt_id == oiItem.pt_id}">selected="selected"</c:if>
value="${item[‘pt_id‘]}">${item[‘pt_name‘]}</option>
</c:forEach>
</select>
</td>
<td style="width: 15%;">
<select style="width: 100%;" class="form-control middlesize ipt2" name="p_id_${status.index+1}" id="p_id_${status.index+1}" onchange="selectProduct(${status.index+1})">
<option value="">请选择</option>
<c:forEach var="item" items="${pList}">
<option <c:if test="${item.p_id == oiItem.p_id}">selected="selected"</c:if> value="${item[‘p_id‘]}">${item[‘p_name‘]}</option>
</c:forEach>
</select>
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_price1_${status.index+1}" readonly="readonly" name="i_price1_${status.index+1}" value="${oiItem[‘i_price1‘]}" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_amount_${status.index+1}" name="i_amount_${status.index+1}" onkeyup="changeAmount(${status.index+1});" value="${oiItem[‘i_amount‘]}" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_spec_${status.index+1}" name="i_spec_${status.index+1}" value="${oiItem[‘p_spec‘] }" readonly="readonly" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_discount_price_${status.index+1}" name="i_discount_price_${status.index+1}" readonly="readonly" value="${oiItem[‘i_discount_price‘]}" class="form-control middlesize ipt2" />
<input type="hidden" id="i_price2_${status.index+1}" name="i_price2_${status.index+1}" value="${oiItem[‘i_price2‘]}" class="form-control middlesize ipt2" />
<input type="hidden" id="i_id_${status.index+1}" name="i_id_${status.index+1}" value="${oiItem[‘i_id‘]}" class="form-control middlesize ipt2" />
</td>
<td align="center" style="width: 5%;">
<a>
<img id="tb_id" style="width: 15px;" onclick="deleteTr()" src="../images/delete.png">
</a>
</td>
</tr>
</c:forEach>
</c:if>
<!-- 判断+循环 -->
<c:if test="${type == 1}">
<tr id="InputsWrapper">
<td align="center" style="width: 5%;">1</td>
<td style="width: 15%;">
<select style="width: 100%;" class="form-control middlesize ipt2" onchange="selectType(1);" name="p_type_1" id="p_type_1">
<option value="">请选择</option>
<c:forEach var="item" items="${ptList}" varStatus="status">
<option <c:if test="${item.pt_id == map.pt_id}">selected="selected"</c:if> value="${item[‘pt_id‘]}">${item[‘pt_name‘]}</option>
</c:forEach>
</select>
</td>
<td style="width: 15%;">
<select style="width: 100%;" class="form-control middlesize ipt2" name="p_id_1" id="p_id_1" onchange="selectProduct(1)">
<option value="">请选择</option>
</select>
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_price1_1" readonly="readonly" name="i_price1_1" value="${map[‘i_price1‘]}" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_amount_1" name="i_amount_1" onkeyup="changeAmount(1);" value="${map[‘i_amount‘]}" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_spec_1" name="i_spec_1" value="箱" readonly="readonly" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_discount_price_1" name="i_discount_price_1" readonly="readonly" value="${map[‘i_discount_price‘]}" class="form-control middlesize ipt2" />
<input type="hidden" id="i_price2_1" name="i_price2_1" value="${map[‘i_price2‘]}" class="form-control middlesize ipt2" />
</td>
<td align="center" style="width: 5%;">
<a>
<img id="tb_id" style="width: 15px;" onclick="deleteTr()" src="../images/delete.png">
</a>
</td>
</tr>
</c:if>
</table>
<table id="tb" align="center" border="0" style="line-height: 40px; text-align: right; margin: 0px auto; width: 90%;" class="display table table-bordered table-striped" >
<tr id="hideTR" style="display: none">
<td align="center" style="width: 5%;">##</td>
<td style="width: 15%;">
<select style="width: 100%;" onchange="selectType(##);" class="form-control middlesize ipt2" name="p_type_##" id="p_type_##">
<option value="">请选择</option>
<c:forEach var="item" items="${ptList}" varStatus="status">
<option <c:if test="${item.pt_id == map.pt_id}">selected="selected"</c:if> value="${item[‘pt_id‘]}">${item[‘pt_name‘]}</option>
</c:forEach>
</select>
</td>
<td style="width: 15%;">
<select style="width: 100%;" class="form-control middlesize ipt2" onchange="selectProduct(##)" name="p_id_##" id="p_id_##">
<option value="">请选择</option>
</select>
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_price1_##" name="i_price1_##" value="${map[‘i_price1‘]}" readonly="readonly" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_amount_##" name="i_amount_##" value="${map[‘i_amount‘]}" onkeyup="changeAmount(##)" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_spec_##" name="i_spec_##" value="箱" readonly="readonly" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_discount_price_##" name="i_discount_price_##" readonly="readonly" value="${map[‘i_discount_price‘]}" class="form-control middlesize ipt2" />
<input type="hidden" id="i_price2_##" name="i_price2_##" readonly="readonly" value="${map[‘i_price2‘]}" class="form-control middlesize ipt2" />
</td>
<td align="center" style="width: 5%;">
<a>
<img id="tb_id" style="width: 15px;" onclick="deleteTr(##)" src="../images/delete.png">
</a>
</td>
</tr>
</table>
<input type="hidden" id="lastNum" name="lastNum" value="1"/>
</div>
</section>
</div>
</div>
</div>
<br>
<center>
<a>
<img src="../images/save.png" alt="保存" width="60px;" onclick="subForm();">
</a>
<a>
<img src="../images/return.png" title="返回" width="60px;" onclick="window.history.go(-1);">
</a>
</center>
<br>
</form>
</div>
</section>
<jsp:include page="../../../jsp/footer.jsp"></jsp:include>
<jsp:include page="../../../jsp/headJs.jsp"></jsp:include>
<script type="text/javascript">
//初始化页面为#lastNum赋值
var type = ${type};
if(type == 2){
var count=${oiListCount};
if(count*1>0){
$("#lastNum").val(count);
}
}
$(window).on(‘load‘, function () {
$(‘.selectpicker‘).selectpicker({
‘selectedText‘: ‘cat‘
});
});
//商品数量发生改变
function changeAmount(num){
var amount = $("#i_amount_"+num).val();
var price1 = $("#i_price1_"+num).val();
var c_discount = $("input:hidden[name=‘c_discount‘]").val();
if(amount > 0 && price1 >0){
$("#i_price2_"+num).val((amount*price1/(1-c_discount).toFixed(2)).toFixed(2));
$("#i_discount_price_"+num).val((amount*price1).toFixed(2));
}
}
//选择商品列表
function selectProduct(num){
var p_id = $("#p_id_"+num +" option:selected").val();
var c_discount = $("input:hidden[name=‘c_discount‘]").val();
var c_id = $("#cid").val();
$.ajax({
url:‘../product/getProductPrice.shtml‘,
type:‘POST‘, //GET
async:false, //或false,是否异步
data:{
"p_id":p_id,
"c_id":c_id
},
timeout:5000, //超时时间
dataType:‘json‘, //返回的数据格式：json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){
console.log(data);
if(data.msg){
//alert(c_discount);
$("#i_price1_"+num).val((data.data*(1-c_discount)).toFixed(2));
$("#i_spec_"+num).val(data.data2);
}else{
layer.msg("失败");
}
},
error:function(xhr,textStatus){
layer.msg("失败");
}
});
}
//选择商品类别
function selectType(type){
var p_type = $("#p_type_"+type +" option:selected").val();
$.ajax({
url:‘../product/getProductListById.shtml‘,
type:‘POST‘, //GET
async:false, //或false,是否异步
data:{"pt_id":p_type,
"type":1
},
timeout:5000, //超时时间
dataType:‘json‘, //返回的数据格式：json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){
console.log(data);
if(data.msg){
$("#i_amount_"+type).val(‘‘);
$("#i_price1_"+type).val(‘‘);
$("#p_id_"+type).empty();
$("#p_id_"+type).append("<option value=‘‘>请选择</option>");
for(var i=0;i<data.data.length;i++){
$("#p_id_"+type).append("<option value=‘"+data.data[i][‘p_id‘]+"‘>"+data.data[i][‘p_name‘]+"</option>");
}
}else{
layer.msg("暂无商品");
}
},
error:function(xhr,textStatus){
layer.msg("失败");
}
});
}
//选择客户
function chooseCustom(obj){
var option_id=obj.options[obj.selectedIndex].value;
$("#cid").val(option_id);
if(option_id==‘‘){
layer.msg("查询失败,无客户记录");
}else{
$("#c_id").val(option_id);
$.post("../custom/getCustomInfo.shtml",{‘c_id‘:option_id},function(data){
if(data != null && data !="null"){
$("#get_phone").val(data.c_linkphone);
$("#o_address").val(data.c_address);
$("#get_name").val(data.c_weixin_name);
$("#c_discount").val(data.c_discount);
}else{
layer.msg("查询失败,无客户记录");
}
});
}
}
//添加行
function addTr() {
//alert(1);
var last_num = $("#lastNum").val();
alert("last_num:"+last_num);
var html = "<tr>";
html += $("#hideTR").html();
html+="</tr>";
re=new RegExp("##","g");
var newstart=html.replace(re,last_num*1+1);
$("#tb").append(newstart);
$("#lastNum").val(last_num*1+1)
}
//删除行
$(‘img#tb_id‘).live(‘click‘, function() {
var last_num = $("#lastNum").val();
if(last_num*1>1){
$("#lastNum").val(last_num*1-1);
$(this).parents(‘tr‘).remove();
}
})
//提交表单
function subForm() {
if (!checkByClass()) {
return false;
}
$("#createForm").ajaxSubmit({
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
success : function(data) {
my_addRefresh(data);
}
});
return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
}
</script>
</body>
</html>
以上是关于硬伤JS的主要内容，如果未能解决你的问题，请参考以下文章