您的位置:首页 > 其它

Jq将页面值传至模态框的用法

2015-09-12 21:40 295 查看

前台html代码

//数据显示div
div class="panel-body">
<div class="table-responsive">

<form action="air-company!deleteHkxx.action" method="post" id="hkgslist">
<table class="table table-striped table-bordered nowrap" width="100%" id="hkgstable">

</table>
<div>

<input type="hidden" name="ajaxtext" value="1" />
</div><div style="float:right;"><input type="submit" id="submit" value="删除" class="btn btn-danger" ></div>
</form>
</div>

</div>


//弹出的模块框
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">修改</h4>
</div>
<form action="air-company!updateHkxx.action" method="post">
<div class="modal-body"><!--
<div class="form-group">
<label style="font-weight:bold">编号</label>
<input type="text" class="form-control" name="ae.id" id="uid"
placeholder="编号" >
</div>
--><div class="form-group">
<label style="font-weight:bold">公司名称</label>
<input type="text" class="form-control" name="ae.name" id="uname"
placeholder="公司名称">
</div>
<div class="form-group">
<label style="font-weight:bold">地址</label>
<input type="text" class="form-control" name="ae.address" id="uaddress"
placeholder="地址">
</div>
<div class="form-group">
<label style="font-weight:bold">联系方式</label>
<input type="text" class="form-control" name="ae.phone" id="uphone"
placeholder="联系方式">
</div>
<div class="form-group">
<label style="font-weight:bold">评价</label>
<input type="text" class="form-control" name="ae.summary" id="usummary"
placeholder="评价" >
</div>
<div class="form-group">
<label style="font-weight:bold">线路编号</label>
<input type="text" class="form-control" name="ae.lid" id="lid"
placeholder="线路编号" >
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="savehkgsxx">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

</div>
</form>
</div>
</div>
</div>


js文件

//显示数据
function showlist(){

$.ajax( {
type : 'POST',
dataType : 'json', // json对象
url : 'air-company!showHkxx.action',
data:null,
success : function(response, status, xhr) {

var s = "";

s +='<thead><tr><td  width="5%"><input type="checkbox" id="select" /><label>全选</label> </td><td>编号</td><td width="10%">公司名称</td><td width="12%">地址</td><td width="15%">联系电话</td><td width="45%">评价</td><td width="8%">操作</td></tr></thead>';
s +='<tbody>';
$.each(response,function(index, value) {
// 组合
//s += '';
s +=   '<tr><td><input type="checkbox" name="ckb" value="'+value.id+'"/><input type="hidden" name="lid" value="'+value.lid+'"/></td><td>'+value.id+'</td><td>'+value.name+'</td><td>'+value.address+'</td><td>'+value.phone+'</td><td>'+value.summary+'</td><td><input type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal" value="修改" name="updatehkgsxx" id="'+value.id+'"/></td></tr>';//这里点击“修改”会弹出模态框
})
s +='</tbody>';

$("#hkgstable").html(s);

$("#hkgstable").dataTable({ //datatable的使用

"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起,查询不到相关数据!",
"sEmptyTable": "表中无数据存在!",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
} //多语言配置

});
updatebutton();
ckb();
},
error : function() {
alert("加载失败");
}

})

}


//取页面的值传给模态框
function updatebutton(){

//点击修改按钮获取相应数据
$("input[name='updatehkgsxx']").each(function (){
//给相应input赋值
$(this).click(function(){
var a=$(this).parent().parent().children().eq(1).text();
//原代码是<tr><td>...</td><td>...</td><td>...</td></tr>,这里取修改按钮所在的父元素(td),再父元素(tr)的子元素(td),然后分别对eq(x),每一个元素(td)进行操作,取值。
var b=$(this).parent().parent().children().eq(2).text();
var c=$(this).parent().parent().children().eq(3).text();
var d=$(this).parent().parent().children().eq(4).text();
//var e=$(this).attr('id');
var f=$(this).parent().parent().children().children("input").eq(1).attr('value');
$('#uname').val(a);
$('#uaddress').val(b);
$('#uphone').val(c);
$('#usummary').val(d);
//$('#uid').val(e);
$('#lid').val(f);

})

})

}


效果如图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: