option的onchange事件附加,用jquery重写,替换在附加之前把onchange事件清空掉
$("#AreaProvince").change(function(){ queryDataOfTrendLine() });
根据option的value近似匹配 实现指定option的点击事件
$("#AreaProvince option").each(function(){
if($(this).text().indexOf(mapParams.name) != -1){
$("#AreaProvince option[value='"+$(this).val()+"']").attr("selected","selected");
$("#AreaProvince").trigger("change");
return false;
}
});
手机端页面调试 (超级神器登场)
<script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script>
<script>eruda.init();</script>
收起折叠实现
<div class="zhyx-cont-item">
<div class="item-tit-wrap">
<h2 class="text-tit">本店线索量构成</h2>
<span class="text-right arr-down">收起</span>
</div>
<div class="folede-box" >
<div class="tab-echart-wrap">
<!-- echart表单 -->
<div class="echart-wrap">
<div style="height: 300px;width:100%" id="phoneAndNetLeadsNumContainer"></div>
</div>
</div>
</div>
</div>
<!-- 本品热门车系 -->
<div class="zhyx-cont-item">
<div class="item-tit-wrap">
<h2 class="text-tit">本品热门车系</h2>
<span class="text-right arr-down">收起</span>
</div>
<div class="folede-box">
<div class="tab-echart-wrap">
<!-- echart表单 -->
<div class="echart-wrap">
<div style="height: 300px;width:100%" id="seriesContainer"></div>
</div>
</div>
</div>
</div>
// 收起
var itemTitWrap = $(".item-tit-wrap");
var textRight = itemTitWrap.find(".text-right");
textRight.bind("click", function () {
if ($(this).hasClass("arr-down")) {
$(this).removeClass("arr-down");
$(this).parent().next().addClass("fn-hide");
}else {
$(this).addClass("arr-down");
$(this).parent().next().removeClass("fn-hide");
}
});
layer中弹出的控件被layer覆盖,设置layer.zIndex的层级来控制
layer.open({
type: 1,
title: '创建短信',
offset: '100px', //距离顶部的距离
zIndex: '1',
skin: 'layui-layer-rim', //加上边框
area: ['520px', '340px'], //宽高
content:''
layer弹窗 daterangepicker时间插件点击无效问题
在layer.open()打开时,加载datetimepicker时间插件; layer.open()中success - 弹出后的成功方法
skin: 'layui-layer-rim', //加上边框
area: ['520px', '340px'], //宽高
content:'',
success:function(layero, index){
if (excelPath != ''){
$("#excelName").val(excelPath);
$("#excelName").css({"display":"inline"});
$("#delExcelId").css({"display":"inline"});
}
$("input[name='dateCreate']").daterangepicker(
{
jquery操作select(取值,设置选中)
http://www.cnblogs.com/hailexuexi/p/6708110.html 这位老兄总结的很全
添加tab页(一次全请求)
<div class="ics_box_v1 mb20" data-plug="tab">
<!-- tab -->
<ul class="ics_tab_v1 ics_tab_v1-big">
<li class="tab-item pl20 pr20 mr0 selected" data-item="tabItem">第一签<i class="tab-item-linebottom"></i></li>
<li class="tab-item pl20 pr20" data-item="tabItem">第二签<i class="tab-item-linebottom"></i></li>
</ul>
<div class="box-bd">
<div data-item="tabList">内容一</div>
<div data-item="tabList" class="fn-hide">内容二</div>
</div>
</div>
tab页(点击tab标签请求一次)
var ifDealerRank = $('.tab-item').eq(0).hasClass("selected"); 用来获取点击了哪个tab页
<div class="ics_box_v1 mb20">
<!-- tab -->
<ul class="ics_tab_v1 ics_tab_v1-big">
<li class="tab-item pl20 pr20 mr0 selected">${(rankTrendName)!}<i class="tab-item-linebottom"></i></li>
<li class="tab-item pl20 pr20">${(subScoreName)!}<i class="tab-item-linebottom"></i></li>
</ul>
<div class="box-bd">
<div>
<#--本店商擎排名start-->
<div class="box-hd">
<span id="trendTitle" class="box-hd-txt pt5"></span>
<div class="fn-right">
<div id="factoryListDiv" class="ics_select-native-box fn-left mr10">
<select class="ics_select-native noshadow" style="width:120px" id="factoryList"
style="width:34px" onchange="factoryListChange()">
<#list factoryList as item>
<option value="${item.factoryId}">
${item.factoryName}
</option>
</#list>
</select>
</div>
</div>
</div>
<div class="box-bd">
<div style="height: 330px;width:100%" id="rankContainer"></div>
<div style="display: none" id="rankContainerhtml"></div>
</div>
<div name="loading" class="ics_loading n-hide"><i class="loading-icon"></i></div>
<#--本店商擎排名end-->
</div>
<div>
</div>
</div>
</div>
点击事件
$('.tab-item').eq(1).on('click', function () {
var title = '${(subScoreName)!}';
$("#trendTitle").html(title);
$(this).addClass('selected').siblings().removeClass('selected');
$("#factoryListDiv").hide();
var startDate = window.__startDate;
var endDate = window.__endDate;
var dealerId = ${dealerId?c};
getDealerEngineSubScore(startDate, endDate, dealerId);
})
$('.tab-item').eq(0).on('click', function (){
var title = '${(rankTrendName)!}';
$("#trendTitle").html(title);
$(this).addClass('selected').siblings().removeClass('selected');
if ($("#factoryList").find("option").length > 1) {
$("#factoryListDiv").show();
}
var startDate = window.__startDate;
var endDate = window.__endDate;
var dealerId = ${dealerId?c};
var factoryId = $('#factoryList').val();
getDealerRankTrend(startDate, endDate, dealerId, factoryId);
})
获取select标签选项个数
if ($("#factoryList").find("option").length < 2) {
$("#factoryListDiv").hide();
}
将后端传来的model列表参数循环生成表格输出
<#list giftTypeList as item>
<tr>
<td>
<input name="giftLevelName" class="wukuang" maxlength="5" value="${(item.giftLevelName)}""/>
</td>
<td><input name="giftTypeName" class="wukuang" maxlength="20" value="${(item.giftTypeName)}"/></td>
<input type="hidden" name="typeId" value=" ${(item.id)}"/>
<td><button class="btn btn-primary" type="button" name="delBtn" onclick="delRow(this,0)">删除</button></td>
</tr>
</#list>
第二种方法需要先对giftInfoList做处理,不然传入list前端直接${}获取会报错
modelAndView.addObject("giftInfoList", JSON.toJSONString(giftConfigurationIn.getAtActivityGiftTypes()));
var numIndex=0;
var giftInfoList='${giftInfoList}';
giftInfoList = JSON.parse(giftInfoList);
//初始化不可编辑数据
<#list dateBeforeList as item>
rowStr += '<tr><td>${(item)}</td>';
for (var i = 1; i < redbagtb.rows.length; i++) {
numIndex = numIndex+i-1;
rowStr += '<td><input name="giftNum" class="wukuang" readonly="true" value="'+giftInfoList[numIndex].giftNum+'" style="border-style: none"/></td>';
}
numIndex++;
rowStr += '</tr>';
</#list>
循环遍历相同名称元素集合并添加属性
$(document).ready(function () {
if (${onlineBool}==1){
var delList = document.getElementsByName("delBtn");
for (var i=0;i<delList.length;i++){
delList[i].setAttribute("disabled", true);
}
}
});
或者 (用了框架最好别用原生的 有时候出了问题不好排查原因,alert其实也是调试忌用的 建议用console.log('ok');)
$(document).ready(function () {
if (${onlineBool}==1){
$('[name="delBtn"]').each(function () {
$(this).attr('disabled',true);
});
}
});
jquery设置控件是否可用,是否可见
1, $('.selector').attr("disabled", true);// 让控件不可用 属性 控件中不能添加此属性,否则无效
2,$('.selector').attr("disabled", false);// 让控件可用 属性
3,$('.selector').css({ "display": "none" });// 让控件不可见 css
4,$('.selector').css({ "display": "inline" });// 让控件可见 css
5,remove() - 删除被选元素(及其子元素)
删除div下边所有元素
var div = document.getElementById("div1");
while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
{
div.removeChild(div.firstChild);
}
循环遍历表格中input数据动态生成表格
//删除之前表格
var giftRule=document.getElementById("giftRule");
for(var i=1;i<giftRule.rows.length;i++){
giftRule.deleteRow(i);
}
//生成新的表格 注意giftRule这个table下面必须有一个已存在的隐藏的tr、td标签才能动态添加
var trLen = $("#giftRule tr").size();
var redbagtb=document.getElementById("redbagtb");
var rowStr = '<tr bgcolor="#dcdcdc"><td>日期</td>';
for(var i=1;i<redbagtb.rows.length;i++){
var giftLevelName = redbagtb.rows[i].cells[0].getElementsByTagName("INPUT")[0].value;
var giftTypeName = redbagtb.rows[i].cells[1].getElementsByTagName("INPUT")[0].value;
rowStr += '<td>' + giftLevelName + ' ' + giftTypeName + '</td>';
}
rowStr += '<td>操作</td></tr>';
var at = trLen - 1;
$("#giftRule tr:eq(" + (at) + ")").after(rowStr);
**tb.rows[i].cells[0].getElementsByTagName("INPUT")[0].value; ->43
**tb.rows[i].cells[1].innerHTML; ->input标签内容
**tb.rows[i].cells[2].innerText; ->删除