bootstrap 模态框传值

instl 2014-08-11

展开全文

bootstrap 模态框传值

楼主爱尚简单 4个月前

 <div class="d_table" id="d_table">
    	<table class="table table-hover table-striped table-bordered">
        	<thead>
            	<tr>
                	<th>姓名</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
            <c:forEach items="${personList.datas}" var="person">
            	<tr>
                	<td>${person.personName}</td>
                    <td>${person.personSex}</td>
                    <td>${person.personPhone}</td>
                    <td>${person.personMail}</td>
                    <td><a data-target="#update" data-toggle="modal" >修改</a> | <a href="javascript:del('${person.id}')">删除</a></td>
                </tr>
              </c:forEach>
            </tbody>
        </table>
    </div>
<div class="modal fade" id="update" aria-hidden="true">
	<div class="modal-dialog">
	    <div class="modal-content">
     	<form id="saveDeviceForm" action="saveDevice" method="post">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>修改</h3>
            </div>
            <div class="modal-body">
                <ul>
                    <li><span>姓名:</span><input id="name" type="text" name="personName"/></li>
                    <li><span>性别：</span>
                        <input id="p_man" type="radio" name="personSex" value="男"/><label for="p_man">男</label>
                        <input id="p_woman" type="radio" name="personSex" value="女"/><label for="p_woman">女</label>
                    </li>
                    <li><span>手机号码：</span><input id="phone" type="text" maxlength="11" name="personPhone"/><span class="errorMeg" id="errorPhone"></span></li>
                    <li><span>邮箱：</span><input type="text" name="personMail" id="email" onblur="checkEmail()"/><span class="errorMeg" id="errorEmail"></span></li>
                    <li><span>地址：</span><input type="text" name="personAddress" /></li>
                </ul>
            </div>
            <div class="modal-footer">
                <a class="button" data-dismiss="modal" aria-hidden="true">取消</a>
                <a class="button" onclick="submitOK()">确定</a>
            </div>
        </form>
    </div>
    </div>
    </div>

点击删除如何将所对应的数据传到id="update"的模态框中

爱尚简单修改于 4个月前

Bootstrap Modal

----------共有2条评论------------
你用的bootstrap版本是2还是3？ (4个月前 by 黑桃K) 回复
@黑桃K版本3 (4个月前 by 爱尚简单) 回复
评论

2^# 黑桃K 4个月前

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
<!-- 最新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn./twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn./twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
 </head>
  <body>
<div class="d_table" id="d_table">
    	<table class="table table-hover table-striped table-bordered">
        	<thead>
            	<tr>
                	<th>姓名</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
            <c:forEach items="${personList.datas}" var="person">
            	<tr id="aa">
                	<td>${person.personName}</td>
                    <td>${person.personSex}</td>
                    <td>${person.personPhone}</td>
                    <td>${person.personMail}</td>
                    <td><a href="javascript:void(0)" onclick="update(this);" >修改</a> | <a href="javascript:del('${person.id}')">删除</a></td>
                </tr>
              </c:forEach>
            </tbody>
        </table>
    </div>
<div class="modal fade" id="update" aria-hidden="true">
	<div class="modal-dialog">
	    <div class="modal-content">
     	<form id="saveDeviceForm" action="saveDevice" method="post">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>修改</h3>
            </div>
            <div class="modal-body">
                <ul>
                    <li><span>姓名:</span><input id="name" type="text" name="personName"/></li>
                    <li><span>性别：</span>
                        <input id="p_man" type="radio" name="personSex" value="男"/><label for="p_man">男</label>
                        <input id="p_woman" type="radio" name="personSex" value="女"/><label for="p_woman">女</label>
                    </li>
                    <li><span>手机号码：</span><input id="phone" type="text" maxlength="11" name="personPhone"/><span class="errorMeg" id="errorPhone"></span></li>
                    <li><span>邮箱：</span><input type="text" name="personMail" id="email" onblur="checkEmail()"/><span class="errorMeg" id="errorEmail"></span></li>
                    <li><span>地址：</span><input type="text" name="personAddress" /></li>
                </ul>
            </div>
            <div class="modal-footer">
                <a class="button" data-dismiss="modal" aria-hidden="true">取消</a>
                <a class="button" onclick="submitOK()">确定</a>
            </div>
        </form>
    </div>
    </div>
    </div>
  </body>
</html>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn./jquery/1.10.2/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn./twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
	function update(obj){
		var tds=$(obj).parent().parent().find('td');
		$('#name').val(tds.eq(0).text());
		$('#update').modal('show');
	}
</script>

我只帮你传了姓名的值，其他的依次类推，你可以把代码复制保存成html文件试试效果。