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); }) }) }
效果如图:
相关文章推荐
- 网络性能测试工具iperf详细使用图文教程
- php添加mysql扩展
- 11.tftp和nfs服务器
- 窗口-CCF测试往届题
- 如何在Android模拟器上安装apk文件
- Hadoop/spark安装实战(系列篇3) Hadoop 伪分布模式安装
- 一个简单的jsp+servlet实例,实现简单的登录
- java练习:打印 数字1、2、3、4的组合,不能以4开头,1和3不能相邻,且数字不能重复
- shell script
- [vb.net]最简单的邮件发送
- php环境的搭建
- 样式表单位
- php添加socket的扩展
- 数据结构之---C语言实现连式多项式
- Multithreading and Grand Central Dispatch on iOS for Beginners Tutorial
- sg函数
- 《剑指Offer》面试题:对字符串进行循环左移
- Qt学习博客
- gcc编译器编译程序过程
- aop入门前内容:静态代理