jquery框架动态的修改table -

anlinko

浏览: 44013 次
性别:
来自: 深圳

最近访客更多访客>>

limengna845567

jiviang

私奔长安

无花果

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery框架动态的修改table

框架 jQuery CSS HTML 浏览器

不多说费话直接进入主题。。。。。
table.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title></title>
  <link type="text/css" rel="stylesheet" href="css/table.css"/>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/table.js"></script> 
</head>
<body>

     <table>
         <thead>
             <tr> <th colspan="2"> 信息栏 </th></tr>
         </thead>
         <tbody>
               <tr>   <td> id </td>
                      <td> 标题 </td>
               </tr>
                 <tr>
                       <th > 1</th>
                       <th> rrrr</th>
                 </tr>
                <tr>
                       <th >2</th>
                       <th> eeee</th>
                 </tr>
             <tr>
                       <th > 3</th>
                       <th> nnnn</th>
                 </tr>
             <tr>
                       <th > 4</th>
                       <th> cccc</th>
                 </tr>
             <tr>
                       <th > 5</th>
                       <th> hhhh</th>
                 </tr>
         </tbody>
     </table>

</body>
</html>

table.css

table{
    border:1px solid black;
    border-collapse:collapse;
    width:500px;
}
 table th{
     border:1px solid black;
     text-align:center;
     width:50%;
 }
 table td{
     border:1px solid black;
     text-align:center;
     width:50%;
 }

  thead tr{
      background-color:red; 
  }
 tbody td{
     background-color:dimgray;
}

table.js【动态表格的关键部分】


 $(function(){
   //tbody中tr为奇数的背景颜色为darkgray
   $("tbody tr:odd").css("backgroundColor","darkgray");
   //为tbody中th为偶数创建单击事件  
   $("tbody th:even").click(function(){
       //当前单击为偶数th对象
       var thObj=$(this);
       //如果当前对象中包含子结点input不创建
       if(thObj.children("input").length>0){
           return false;
       }
       //创建input对象
       var  inputObj=$("<input type='text'/>");
       //把thObj中的内容赋值给text变量
       var text=thObj.html();
        //清空thObj对象中的内容
       thObj.html("");
       //设置input对象中的样式与thObj对象一样
       //后面把input对象增加到thObj父结点中
       inputObj.css("borderWidth","0")
               .width(thObj.width())
               .height(thObj.height())
               .css("backgroundColor",thObj.css("backgroundColor"))
               .val(text)
               .appendTo(thObj);
       //全选input中的内容
      // inputObj.select(); 或 二种实现支持所有的浏览器
       inputObj.trigger("focus").trigger("select");
       //取消input中的单击事件
      /* inputObj.click(function(){
          return false;
       });*/
       //如果是如果按ENTER就修改,ESC就取消
       inputObj.keyup(function(event){
            var keycode=event.which;
             if(keycode==13){
                 if(inputObj.val()!='100'){
                       thObj.html(inputObj.val());
                         }else{
                         alert("not 100 error");
                       }
             }
             if(keycode==27){

                  thObj.html(text);
             }
         });
     });

   /*---------------------------------------------------------------------*/
      //为tbody中th为奇数创建单击事件
   $("tbody th:odd").click(function(){
       //当前单击为奇数th对象
       var thObj=$(this);
       //如果当前对象中包含子结点input不创建
       if(thObj.children("input").length>0){
           return false;
       }
       //创建input对象
       var  inputObj=$("<input type='text'/>");
       //把thObj中的内容赋值给text变量
       var text=thObj.html();
        //清空thObj对象中的内容
       thObj.html("");
       //设置input对象中的样式与thObj对象样式一样
       //后面把input对象增加到thObj父结点中
       inputObj.css("borderWidth","0")
               .width(thObj.width())
               .height(thObj.height())
               .css("backgroundColor",thObj.css("backgroundColor"))
               .val(text)
               .appendTo(thObj);
       //全选input中的内容
      // inputObj.select(); 或 二种实现支持所有的浏览器
       inputObj.trigger("focus").trigger("select");
       //取消input中的单击事件
      /* inputObj.click(function(){
          return false;
       });*/
       //如果是如果按ENTER就修改,ESC就取消
       inputObj.keyup(function(event){
            var keycode=event.which;
             if(keycode==13){
             thObj.html(inputObj.val());
             }
             if(keycode==27){
              thObj.html(text);
             }
         });
     });
     
 });