首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

《Javaweb-JQuery兑现可编辑的表格》

2012-10-10 
《Javaweb---JQuery实现可编辑的表格》问题仔细找,总会找到的。!DOCTYPE htmlhtmlheadtitle简单的可

《Javaweb---JQuery实现可编辑的表格》

问题仔细找,总会找到的。

<!DOCTYPE html><html>  <head>    <title>简单的可编辑表格</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <style type="text/css">    td {border: 1px red solid;cursor: pointer;}    </style>    <script type="text/javascript" src="jslib/jquery.js"></script>    <script type="text/javascript" src="jslib/edit.js"></script>    <!-- <link rel="stylesheet" type="text/css" href="css/edit.css"> -->  </head>    <body>  <table>  <tr>  <td>123</td>  <td>456</td>  </tr>  </table>  </body></html>


 

//当页面加载时执行此方法$(document).ready(function(){var tds = $("td");//对所有的td注册点击事件tds.click(tdclick);});function tdclick() {var td = $(this); //保存td中的文本数据var text = td.text();//清空td中的数据td.text("");//利用JQuery插入一个input标签var input = $("<input>");//设置input标签中的值input.attr("value",text);//给input注册键盘按下弹起事件input.keyup(function(event){//获取键盘按下的code值var key = event.keyCode;//判断是否是回车键if (key == 13){//获取input的value中值var ntext = $("input").val();//将input中的值赋给tdtd.html(ntext);//重新建立td点击事件td.bind("click",tdclick);}});//将input标签添加到td中td.append(input);//将input中的内容选中input.get(0).select();//取消td点击事件td.unbind("click",tdclick);}


《Javaweb-JQuery兑现可编辑的表格》

热点排行