動態的修改td的內容
<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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.