jq通過對象獲取其ID值,再簡單ajax傳到后台改值

　　　　　　　　　<tbody>
                    <tr>
                        <#if scopes?exists>
                            <#list scopes as scopes>
                                    <td id='${(scopes.scopeId)?default(0)}'>${(scopes.lowerLimit)?default("")}</td>
                                    <td id='${(scopes.scopeId)?default(0)}'>${(scopes.upperLimit)?default("")}</td>
                                </tr>
                            </#list>
                        </#if>
                    </tr>
                </tbody>

js：

<script type="text/javascript"
            src="http://www.17sucai.com/static/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $('table td').click(
            
            //定義點擊事件
                    function() {
                        if (!$(this).is('.input')) {
                            //獲取該td的id
                            var this_id=$(this).attr("id");
                            alert(this_id);
                            //如果當前不是.input類 
                            $(this).addClass('input')
                                    .html(
                                            '<input type="text" name="inputid" id="inputid" value="' + $(this)
                                                    .text() + '" />').find('input')
                                    .focus().blur(function() {
                                    //失去焦點獲取值，存入數據庫
                                    var inputid = document.getElementById("inputid").value;    //獲取該寫入的值
                                    //alert(inputid);
                                    $.ajax({
                                    　　　　 url:'myChangeTest.action',
                                            data:{
                                                sendTime: (new Date()).getTime(),
                                                this_id: this_id,
                                                inputid: inputid
                                            },
                                            type:"post",
                                            async:false,
                                            dataType:"json",
                                            success:function(data){
                                                if(data.success){
                                                    alert("sucess");
                                                }else{
                                                
                                                }
                                            }
                                        });
                                    
                                            //當前添加類獲得元素新插入一個input通過遍歷獲得input定義偽類，當失去焦點以后在定義一個方法  
                                            $(this).parent().removeClass('input')
                                                    .html($(this).val() || 0);
                                            //當前查找每個元素，刪除掉input類獲得input所有元素的值並且和0  
                                        });
                        }
                    }).hover(function() {
                //定義偽類  
                    $(this).addClass('hover');
                }, function() {
                    //定義方法  
                    $(this).removeClass('hover');
                });
    
        });
</script>
        <style type="text/css">
/* 一些網頁的樣式 */
body {
    font-family: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue",
        Arial, sans-serif;
    font-size: 62.5%;
}

table {
    border-collapse: collapse;
}

td,th {
    text-align: center;
    border: 1px solid #ddd;
    padding: 2px 5px;
}

caption {
    margin: 0 0 .5em;
    font-weight: bold;
}


table {
    width: 500px;
    height: 200px;
    margin-left: 30px;
}

td,th {
    font-size: 1.2em;
    padding: 2px;
    width: 13%;
}

th {
    background-color: #f4f4f4;
}

caption {
    font-size: 1.5em;
}

table {
    float: left;
    margin: 40px 40px 0 0;
}

.demo {
    width: 500px;
    margin: 0 auto;
}

/* input */
td input {
    border: 1px solid orange;
    background: yellow;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    padding: 8px 0;
    text-align: center;
    width: 60px;
    margin: -17px 0 0 4px;
    font-size: 1.4em;
}

td.input {
    padding: 0;
    position: relative;
}

td.hover {
    background: #eee;
}
</style>

 心得，就是焦點的問題，失去焦點的時候 ajax 傳到后台保存