用jQuery—ui对表格进行修改数据

刺骨的言语ヽ痛彻心扉 2022-07-28 06:29 106阅读 0赞

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <link rel="stylesheet" href="css/jquery-ui.css"/>  
    <script src="js/jquery-1.10.2.js"></script>  
    <script src="js/jquery-ui.js"></script>  
    <style>  
        table\{  
            border: 1px solid gray;  
            text-align: center;  
            width: 1000px;  
            border-collapse: collapse;  
        \}  
        table th, table td\{  
            border: 1px solid gray;  
        \}  
        .cl1:hover, .cl2:hover\{  
            cursor: pointer;  
            background-color: orange;  
        \}  
    </style>  
</head>  
<body>  
<table>  
    <tr>  
        <th>序号</th>  
        <th>姓名</th>  
        <th>性别</th>  
        <th>生日</th>  
        <th>手机</th>  
        <th>地址</th>  
        <th>备注</th>  
    </tr>  
    <tr class="cl1">  
        <td>1</td>  
        <td>张三</td>  
        <td>男</td>  
        <td>1980-06-06</td>  
        <td>13012345678</td>  
        <td>四川省成都市武侯区</td>  
        <td>笨蛋一个</td>  
    </tr>  
    <tr class="cl2">  
        <td>2</td>  
        <td>张三</td>  
        <td>男</td>  
        <td>1980-06-06</td>  
        <td>13012345679</td>  
        <td>四川省成都市武侯区</td>  
        <td>无</td>  
    </tr>  
    <tr class="cl1">  
        <td>3</td>  
        <td>哈哈</td>  
        <td>男</td>  
        <td>1983-03-15</td>  
        <td>13066665678</td>  
        <td>四川省成都市武侯区</td>  
        <td>.......</td>  
    </tr>  
    <tr class="cl2">  
        <td>4</td>  
        <td>王玲玲</td>  
        <td>女</td>  
        <td>1990-06-06</td>  
        <td>13088888888</td>  
        <td>四川省成都市武侯区</td>  
        <td>不是美女</td>  
    </tr>  
    <tr class="cl1">  
        <td>5</td>  
        <td>王建国</td>  
        <td>男</td>  
        <td>1985-06-30</td>  
        <td>13012341234</td>  
        <td>四川省成都市武侯区</td>  
        <td>哈哈</td>  
    </tr>  
    <tr class="cl2">  
        <td>6</td>  
        <td>李斯</td>  
        <td>男</td>  
        <td>1981-12-06</td>  
        <td>13012344444</td>  
        <td>四川省成都市武侯区</td>  
        <td>没有</td>  
    </tr>  
</table>  
  
  
  
  
<div title="个人信息" id="info">  
    序号： <input type="text" readonly/><br/>  
    姓名： <input type="text"/><br/>  
    性别： <select style="width: 153px;" name="sex" id="sex"><option>男</option><option>女</option></select><br/>  
    生日： <input type="text"/><br/>  
    电话： <input type="text"/><br/>  
    地址： <input type="text"/><br/>  
    备注： <textarea style="resize: none;" name="desc" id="desc" cols="19" rows="6"></textarea><br/>  
</div>  
  
  
<script>  
  
  
    $("\#info").dialog(\{  
        modal: true,  
        autoOpen: false,  
        width: 450,  
        show: \{  
            effect: "blind",  
            duration: 1000  
        \},  
        hide: \{  
            effect: "explode",  
            duration: 1000  
        \},  
        buttons: \{                             //添加关闭按钮  
            关闭: function() \{  
                $( this ).dialog( "close" );  
            \},  
            修改: function() \{                  //添加修改按钮  
                saveinfo(this);  
            \}  
        \},  
        resizable: false  
    \});  
  
  
    $("\#info>:input:eq(3)").datepicker(\{  
        dateFormat: "yy-mm-dd",                       //日期的显示格式  
        changeMonth: true,  
        changeYear: true,  
        monthNamesShort: \[ "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二" \],                       //将月份改为中文  
        dayNamesMin: \[ "日", "一", "二", "三", "四", "五", "六" \],                                                                          //将星期改为中文  
        maxDate: "0"                                              //限制最大日期为今天  
    \});  
    $("\#ui-datepicker-div").css("font-size","10px");  
  
  
    function saveinfo(obj)\{  
        //在保存数据前进行常规验证  
        var ins = $("\#info>:input");  
        var bl1=/^\[\\u4e00-\\u9fa5\]\{2,\}$/.test(ins.eq(1).val());                   //姓名的输入正则表达式  
        var bl3=/^1\[34578\]\\d\{9\}$/.test(ins.eq(4).val());                             //电话号码的输入正则表达式  
        var bl4=/^.+$/.test(ins.eq(5).val());                                        //地址的输入正则表达式  
  
  
        ins.eq(1).next("span").remove();  
        ins.eq(4).next("span").remove();  
        ins.eq(5).next("span").remove();  
        if(bl1 && bl3 && bl4)\{  
            var tds = $("table tr:eq("+ins.eq(0).val()+")").children("td");  
            ins.each(function(i)\{  
                tds.eq(i).html(ins.eq(i).val());  
            \});  
            $(obj).dialog( "close" );  
        \}else\{  
            if(!bl1) ins.eq(1).after("<span style='color: red;font-size: 10px;'>姓名只能汉字，至少2个</span>");  
            if(!bl3) ins.eq(4).after("<span style='color: red;font-size: 10px;'>电话号码只能是11位数字</span>");  
            if(!bl4) ins.eq(5).after("<span style='color: red;font-size: 10px;'>地址必须有</span>");  
        \}  
    \}  
  
  
    //设置除了第一行以外的其他行的点击操作  
    //第二次调整需要遮罩层以及修改的内容块居中  
    $("table tr:gt(0)").click(function()\{  
        $("\#info").dialog('open');  
//        $("div\[title='info'\]").css("z-index","10001").show();  
  
  
        //获取选中行的所有的格子的集合  
        var tds = $(this).children("td");  
        //获取隐藏块中所有表单元素的集合  
        var ins = $("\#info>:input");  
        //使用each循环将表格中的数据依次放入到对应的表单元素中去  
        tds.each(function(i)\{  
            ins.eq(i).val($(this).html());  
        \});  
//        //数据放置完毕，显示隐藏块  
//        $("div\[title='info'\]").show();  
    \});  
  
  
</script>

</body>

</html>