动态的修改td的内容

2017-10-16 20:18:13来源:CSDN作者:Johnston_man人点击

分享
<!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>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台