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

相关文章
|
6月前
|
JSON 前端开发 JavaScript
JavaWeb14(ajax02判断账号是否存在&JSON介绍&AJAX+JSON字符串和对象之间的转换&JSON实现自动补全)
JavaWeb14(ajax02判断账号是否存在&JSON介绍&AJAX+JSON字符串和对象之间的转换&JSON实现自动补全)
|
1月前
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX - 创建 XMLHttpRequest 对象
|
2月前
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX - 创建 XMLHttpRequest 对象
|
3月前
|
XML JSON 前端开发
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
38 0
|
4月前
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
|
4月前
|
前端开发 JavaScript
解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
60 0
|
5月前
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面
|
8月前
|
前端开发
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
98 0
|
8月前
|
前端开发
如何用ajax请求后台数据的两种全网最实用且详细的写法
如何用ajax请求后台数据的两种全网最实用且详细的写法
86 0
|
8月前
|
XML 前端开发 JavaScript
Ajax介绍以及工作原理和实现详解(JS实现Ajax 和 JQ实现Ajax)
Ajax介绍以及工作原理和实现详解(JS实现Ajax 和 JQ实现Ajax)
111 0