<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双击修改td的内容</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
td {height: 55px;}
</style>
</head>
<body>
<table border="1px" cellpadding="0" cellspacing="0" width="80%" bgcolor="#CCCCCC" align="center">
<tr style="color:red; background-color:#CCFFFF;text-align:center;height: 80px"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr style="text-align:center">
<td class="modify" name="1" style="width: 100px;">
1
</td>
<td class="modify" name="2" style="width: 55px;">
2
</td>
<td class="modify" name="3" style="width: 55px;">
3
</td>
<td class="modify" name="4" style="width: 150px;">
4
</td>
<td class="modify" name="5" style="width: 300px;">
5
</td>
<td class="modify" name="6" style="width: 400px;">
6
</td>
<input id="id" type="hidden" value="">
</tr>
<tr style="text-align:center">
<td class="modify" name="1" style="width: 100px;">
1
</td>
<td class="modify" name="2" style="width: 55px;">
2
</td>
<td class="modify" name="3" style="width: 55px;">
3
</td>
<td class="modify" name="4" style="width: 150px;">
4
</td>
<td class="modify" name="5" style="width: 300px;">
5
</td>
<td class="modify" name="6" style="width: 400px;">
6
</td>
<input id="id" type="hidden" value="">
</tr>
<tr style="text-align:center">
<td class="modify" name="1" style="width: 100px;">
1
</td>
<td class="modify" name="2" style="width: 55px;">
2
</td>
<td class="modify" name="3" style="width: 55px;">
3
</td>
<td class="modify" name="4" style="width: 150px;">
4
</td>
<td class="modify" name="5" style="width: 300px;">
5
</td>
<td class="modify" name="6" style="width: 400px;">
6
</td>
<input id="id" type="hidden" value="">
</tr>
</table>
</body>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- 使用seajs方式 -->
<script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
<script src="http://g.alicdn.com/bui/bui/1.1.21/seed-min.js"></script>
<script type="text/javascript">
// 把原内容去除空格
function trimstr(str){
return str.replace(/(^\s*)|(\s*$)/g,"");
}
$(function(){
$("td.modify").dblclick(function(){
var this_td = $(this);
var name = $(this).attr("name"); //name 属性值
var id = this_td.parent("tr").find("#id").val(); // tr下的隐藏input的值
var oldhtml = this_td.text(); //原文本
var oldtext = trimstr(oldhtml); //新文本
var input = "<input type='text' id='change' style='width:85%;height:55px;' value=''>";
this_td.html(input); //td的属性改为input
$("#change").focus().val(oldtext); //获取焦点,并把原值写入
// 失去焦点事件
$("#change").blur(function(){
var newtext = $(this).val();
this_td.html(newtext);
// 以下是需要发送 ajax的
/*
if(newtext==oldtext){ // 文本内容无变化
$(this).remove();
this_td.html(oldtext);
}
else{ // 文本内容发生变化
if(confirm("确定提交此数据吗?")){ //显示一个带有指定消息和 OK 及取消按钮的对话框
var action = 'edit';
// 发送ajax 请求一个接口post.url
$.post("post.url",{action:action,name:name,id:id,value:newtext},function(data){
//alert(data);
if(data=="成功"){
alert("修改成功");
location.reload();// 重新加载页面
}else{
alert("修改失败");
}
});
}
}
*/
})
})
})
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title>双击修改td的内容</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
td {height: 55px;}
</style>
</head>
<body>
<table border="1px" cellpadding="0" cellspacing="0" width="80%" bgcolor="#CCCCCC" align="center">
<tr style="color:red; background-color:#CCFFFF;text-align:center;height: 80px"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr style="text-align:center">
<td class="modify" name="1" style="width: 100px;">
1
</td>
<td class="modify" name="2" style="width: 55px;">
2
</td>
<td class="modify" name="3" style="width: 55px;">
3
</td>
<td class="modify" name="4" style="width: 150px;">
4
</td>
<td class="modify" name="5" style="width: 300px;">
5
</td>
<td class="modify" name="6" style="width: 400px;">
6
</td>
<input id="id" type="hidden" value="">
</tr>
<tr style="text-align:center">
<td class="modify" name="1" style="width: 100px;">
1
</td>
<td class="modify" name="2" style="width: 55px;">
2
</td>
<td class="modify" name="3" style="width: 55px;">
3
</td>
<td class="modify" name="4" style="width: 150px;">
4
</td>
<td class="modify" name="5" style="width: 300px;">
5
</td>
<td class="modify" name="6" style="width: 400px;">
6
</td>
<input id="id" type="hidden" value="">
</tr>
<tr style="text-align:center">
<td class="modify" name="1" style="width: 100px;">
1
</td>
<td class="modify" name="2" style="width: 55px;">
2
</td>
<td class="modify" name="3" style="width: 55px;">
3
</td>
<td class="modify" name="4" style="width: 150px;">
4
</td>
<td class="modify" name="5" style="width: 300px;">
5
</td>
<td class="modify" name="6" style="width: 400px;">
6
</td>
<input id="id" type="hidden" value="">
</tr>
</table>
</body>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- 使用seajs方式 -->
<script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
<script src="http://g.alicdn.com/bui/bui/1.1.21/seed-min.js"></script>
<script type="text/javascript">
// 把原内容去除空格
function trimstr(str){
return str.replace(/(^\s*)|(\s*$)/g,"");
}
$(function(){
$("td.modify").dblclick(function(){
var this_td = $(this);
var name = $(this).attr("name"); //name 属性值
var id = this_td.parent("tr").find("#id").val(); // tr下的隐藏input的值
var oldhtml = this_td.text(); //原文本
var oldtext = trimstr(oldhtml); //新文本
var input = "<input type='text' id='change' style='width:85%;height:55px;' value=''>";
this_td.html(input); //td的属性改为input
$("#change").focus().val(oldtext); //获取焦点,并把原值写入
// 失去焦点事件
$("#change").blur(function(){
var newtext = $(this).val();
this_td.html(newtext);
// 以下是需要发送 ajax的
/*
if(newtext==oldtext){ // 文本内容无变化
$(this).remove();
this_td.html(oldtext);
}
else{ // 文本内容发生变化
if(confirm("确定提交此数据吗?")){ //显示一个带有指定消息和 OK 及取消按钮的对话框
var action = 'edit';
// 发送ajax 请求一个接口post.url
$.post("post.url",{action:action,name:name,id:id,value:newtext},function(data){
//alert(data);
if(data=="成功"){
alert("修改成功");
location.reload();// 重新加载页面
}else{
alert("修改失败");
}
});
}
}
*/
})
})
})
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
