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 传到后台保存