非常好的弹出表单窗口

最新推荐文章于 2023-04-16 10:46:59 发布

crabboy

最新推荐文章于 2023-04-16 10:46:59 发布

阅读量2.5k

点赞数

文章标签： F# HTML


<html>
 <head>
   <title>测试页面</title>
   <style>
     .list {
       border-top:1 solid #8A2BE2;
       border-left:1 solid #8A2BE2;
       border-right:1 solid #8A2BE2;
     }
     .list td {
       border-bottom: 1 solid #8A2BE2;
     }
   </style>
   <script>
      function $(el) {
        return document.getElementById(el);
      }
      function showWin(param) {
        window.showModalDialog("dailog.html", param, "dialogWidth:" +param.width +"px;dialogHeight:"+param.height+"px;center:yes;help:no;scroll:no;status:no;resizable:no");
      }

      function TB(tbid) {
        this.tb = typeof(tbid) == "string"? $(tbid): tbid;
        this.getValue = function(rowIndex, cellIndex){
          var trs = this.tb.rows[rowIndex];
          var _td = trs.cells[cellIndex];
          return _td.innerText;
        }
        this.setValue = function(rowIndex, cellIndex, value) {
          var _tr = this.tb.rows[rowIndex];
          var _td = _tr.cells[cellIndex];
          _td.innerText = value;
        }

        /********获取行索引********/
        this.findRowIndex = function(eventSrc) {
          var _tr = eventSrc; //eventSrc事件源,必须在TD里获事件源是TD或TR本身
          while(_tr.tagName != "TR") {
            _tr =  _tr.parentNode;
          }
          var trs = this.tb.rows;
          for(var i = 0; i < trs.length; i++){
            if(_tr == trs[i]) return i;
          }
        }
      }

      function edit() {
        var tb = new TB("data");
        rIndex = tb.findRowIndex(event.srcElement);
        $("updateRowIndex").value = rIndex;
        $("userName").value = tb.getValue(rIndex, 1); //获得姓名
        $("sex").value = tb.getValue(rIndex, 2); //获得性别
        $("age").value = tb.getValue(rIndex, 3); //获得年龄
         showWin({title:"修改用户信息", width:390, height:230, _div:"openWin",parent:window});
      }

      function saveAndUpdateView(){
        var updateRowIndex = $("updateRowIndex").value;
        var tb = new TB($f("data")); //$f()在dailog.html定义,获到的table是父窗口中的table
        tb.setValue(updateRowIndex, 1, $("userName").value);
        tb.setValue(updateRowIndex, 2, $("sex").value);
        tb.setValue(updateRowIndex, 3, $("age").value);
        close();
      }
   </script>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
 <body>
  <p style="margin-top:60px">
   <center>
     <table id="data" class="list" width="460px">
       <tr> 
         <td>编号</td>
         <td>用户名</td>
         <td>性别</td>
         <td>年龄</td>
         <td>操作</td>
       </tr>
       <tr> 
         <td>1</td>
         <td>李永胜</td>
         <td>男</td>
         <td>27</td>
         <td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
       </tr>
        <tr> 
         <td>2</td>
         <td>林兄</td>
         <td>男</td>
         <td>27</td>
         <td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
       </tr>
        <tr> 
         <td>3</td>
         <td>叶兄</td>
         <td>男</td>
         <td>23</td>
         <td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
       </tr>
     </table>
   </center>
  </p>

  <!---弹出窗口显示的内容---->
  <div id="openWin" style="display:none;">
    <form>
      <fieldSet>
        <legend>修改用户</legend>
        <table>
          <tr>
            <td>用户名</td><td><input type="text" id="userName"/></td>
          </tr>
          <tr>
            <td>性别</td><td><input type="text" id="sex"/></td>
          </tr>
          <tr>
            <td>年龄</td><td><input type="text" id="age"/></td>
          </tr>
        </table>
      </fieldSet> 
      <input type="hidden" id="updateRowIndex"/>
    </form>
    <span style="background:#FAEBD7;cursor:hand" onclick="saveAndUpdateView();"> 修改 </span>
  </div>
 </body>
</html>

crabboy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
非常好的弹出表单窗口

[code="java"] 测试页面 .list { border-top:1 solid #8A2BE2; border-left:1 solid #8A2BE2; border-right:1 solid #8A2BE2; } .list td { border-bo...
复制链接

扫一扫