html+JQuery实现可编辑表格

最新推荐文章于 2021-05-07 17:22:10 发布

光着脚丫数星星

最新推荐文章于 2021-05-07 17:22:10 发布

阅读量2.1k

点赞数

分类专栏： Java后台文章标签： jquery学习

Java后台专栏收录该内容

134 篇文章 0 订阅

订阅专栏

 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   
    <html>
   
    <head>
   
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
    <title>lianxi</title>
   
    <script src="jquery-1.8/jquery-1.8.0.js"></script>
   
    <style>
   
    p{text-align:center;}
   
    </style>
   
    <script>
   
    $(document).ready(function(){
   
        var data=[{nub:"1",name:"Tim",apartment:"人事部",worknub:"1401"},
   
                   {nub:"2",name:"TompSon",apartment:"咨询部",worknub:"1402"},
   
                   {nub:"3",name:"chanel",apartment:"安保部",worknub:"1403"}]//JSon对象
   
        var tab1=$("#tab")
   
        $.each(data,function(index,item){
   
            var row=$("<tr></tr>");
   
            $.each(item,function(name,value){
   
                var td=$("<td></td>").html(value);
   
                row.append(td);            
   
            });
   
            tab1.append(row);
   
        });//为表单填充对应JSon值
   
        $("#tab").find("tr:not(:first)").each(function(){
   
            $(this).children().eq("0").addClass("nub");
   
            $(this).children().eq("1").addClass("name");
   
            $(this).children().eq("2").addClass("apartment");
   
            $(this).children().eq("3").addClass("worknub");
   
        });//为每个对应的列添加class名
   
        $("#tab").find("td").click(function a(){
   
            var inputSize=$(this).find("input").size();
   
            if(inputSize>0) return;
   
            var tdText=$(this).text();
   
            var inputObj=$('<input type="text" />');
   
            $(this).empty().append(inputObj);
   
            inputObj.val(tdText); //给td绑定单击事件，当点击时增加<input/>
   
        $("#tab").find("input").blur(function() {
   
                    var inputText = $(this).val();
   
                    $(this).parent().html(inputText);
   
                    $(this).click(a);
   
                }); //当input失去焦点时，变量inputText保存当前值，清空当前父元素的内容并填充文本，在给当前td重新拥有点击事件        
   
            });
   
        $("#btn1").click(function(){
   
            var inputObj=$("#tab").find("input[type='text']");
   
            if(inputObj.size()>0){
   
                inputObj.each(function(){
   
                    var val=$(this).val();
   
                    $(this).parent().empty().html(val);
   
                });            
   
            };//单击保存按钮，使其清空所有inpu
   
            var JsonText="";
   
            $("#tab").find("tr:not(:first)").each(function(){
   
                JsonText+="{";
   
                $(this).find("td").each(function(){
   
                    JsonText+='"'+$(this).attr("class")+'":"'+$(this).text()+'",';
   
                });
   
                JsonText=JsonText.substr(0,JsonText.length-1);
   
                JsonText+="},";
   
                });
   
            JsonText=JsonText.substr(0,JsonText.length-1);
   
            console.log("["+JsonText+"]");    
   
        });    //取出数据拼接成JSon格式
   
    });
   
    </script>
   
    </head>
   
    <body>
   
    <table id="tab" align="center" border="1">
   
    <tr>
   
    <th>编号</th>
   
    <th>姓名</th>
   
    <th>部门</th>
   
    <th>工号</th>
   
    </tr>
   
    </table>
   
    <p><input  id="btn1" type="button" value="保存" /></p>
   
    </body>
   
    </html>