html+JQuery实现可编辑表格

来源：互联网发布：openstack网络架构图编辑：程序博客网时间：2024/05/16 04:13
<!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>
0 0