JQuery实战第二讲：可以编辑的表格-蝎子座的故事

JQuery实战第二讲：可以编辑的表格的笔记

相关课时：

JQuery实战第二讲：可以编辑的表格2014-05-08

笔记详情：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<style type="text/css">
table{
  border:1px solid black;
  border-collapse:collapse;

}
table td,table th{
  border:1px solid black;
  width: 200px;
}
tbody th{
  background-color:greenyellow;
}
</style>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
  $("tbody tr:even").css("background-color","red");
  var numtd = $("tbody td:even");
  numtd.click(function(){
   if(numtd.children("input").length>0){
    return false;
   }
   var inputobj = $("<input type='text'>");

   var tdobj = $(this);
   inputobj.css({
    "border-width":"0",
    "font-size":"16px",
    "background-color":tdobj.css("background-color")
   });
   inputobj.width(tdobj.width());
   var text = tdobj.html();
   inputobj.val(text );
   tdobj.html("");
   inputobj.appendTo(tdobj);

   /*inputobj.get(0).select();*/
   inputobj.trigger("focus").trigger("select");

   inputobj.click(function(){
    return false;
   });

   inputobj.keyup(function(event){
    var keycode = event.which;
    if(keycode==13){
     var myinput = $(this).val();
     tdobj.html(myinput);
    }else if(keycode==27){
     tdobj.html(text);
    }
   })




  });

});
</script>
</head>

<body>

<table>
  <thead>
   <tr >
    <th colspan="2">可以编辑的表单</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th>学号</th>
    <th>姓名</th>
   </tr>
   <tr>
    <td>001</td>
    <td>张三</td>
   </tr>
   <tr>
    <td>002</td>
    <td>李四</td>
   </tr>
   <tr>
    <td>003</td>
    <td>王五</td>
   </tr>
   <tr>
    <td>004</td>
    <td>李六</td>
   </tr>
  </tbody>
</table>
</body>
</html>

你感兴趣的课程

原创

开始学习

IT互联网微信小程序项目零基础实战（App）实战篇

7429浏览/ 0学员/ 0评分

￥199.00

原创

开始学习

IT互联网微信小程序项目零基础实战（App）基础篇

6536浏览/ 2学员/ 0评分

￥99.00

原创

开始学习

网页设计【饥人谷】前端实战：阿里工程师教你实现日历UI组件

6471浏览/ 23学员/ 0评分

免费

课程最新笔记

JQuery实战第二讲：可以编辑的表格的笔记
点击UITaleViewCell后Push到UIWebView？我的目的是做网易新闻的，我第一次做没经验，我目前可以做到的就是获取大小标题和图片显示在UITableViewCell上，但是我想要实现点击这个cell进入到一个页面显示详细内容（我的想法是这样的：点击UITaleViewCell后Push到UIWebView），如果想法错误可以给我指路吗？。如果这样不行或者这样行也好，还有其他方式从点击cell跳转到另一个页面显示新闻具体内容（现在只能显示标题）吗？本菜鸟，谢谢各位大神了？
JQuery实战视频教程第一讲：概述、环境准备及入门实例的笔记
不错就是时间比较久了，还Nokia呢 - -
JQuery实战视频教程第一讲：概述、环境准备及入门实例的笔记
土豆网、豆瓣网、谷歌都是很好的WEB编写库兼容的浏览器：IE9以上书籍：JQuery基础教程
JQuery实战第二讲：可以编辑的表格的笔记
dfdfdfdfdfddfdfdfdfdfdfdfdfdfddfdfdfdfdfdfdfddfdfdfdfdfdfdfdf

JQuery实战视频教程

JQuery实战第二讲：可以编辑的表格的笔记

你感兴趣的课程