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