点击按钮，弹出模态框并加载数据

需求分析：在做修改数据的功能时，经常会有弹出模态框修改数据的需求，如图，点击编辑按钮，弹出模态框，并将该行的字段内容全部加载入模态框的相应标签中。

模态框

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <form class="modal-content" method="get" id="studentForm" action="edit" role="form">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">请更改</h4>
      </div>
      <div class="modal-body">
        <table>
          <tr>
            <td><b>学号:</b></td>
            <td><input type="text" id="id" name="id" readonly></td>
          </tr>
          <tr>
            <td><b>姓名:</b></td>
            <td><input type="text" id="name" name="name"/></td>
          </tr>
          <tr>
            <td><b>登记时间：</b></td>
            <td><input type="text" id="time" name="time"/></td>
          </tr>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-primary">确定</button>
      </div>
    </form>
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

编辑按钮，弹出模态框并调用doEdit方法加载数据

<a id="edit_id" href="#" onclick="doEdit(this)" data-toggle="modal" data-target="#myModal" >

doEdit方法

function doEdit(obj) {//这个obj是编辑按钮的对象
      var tds = obj.parentNode.parentNode.childNodes;//当前对象的父节点的父节点的子节点数组
      document.getElementById("id").value=tds[1].innerText;
      document.getElementById("name").value=tds[2].innerText;
      document.getElementById("time").value=tds[3].innerText;
    }