table单击进入编辑状态、失去焦点发送数据到后台

本人qq:949670634 欢迎同行朋友与我进行技术交流




<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>资源常包管理</title>
 <script type="text/javascript" src="../../components/utils/common.js"></script> 
<link rel="stylesheet" type="text/css" href="../../ui/bootstrap/dist/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="../../components/bootstrap-datepicker/datepicker.css">
<script src="../../components/clickright/cliclright.js"></script> 
<script type="text/javascript" src="../../components/bootstrap-datepicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../../components/bootstrap-datepicker/bootstrap-datepicker.zh-CN.js"></script>
<script src="../../components/clickright/cliclright.js"></script> 
<script src='../../components/avalon/avalon.js'></script>
 
<script type="text/javascript" src="../../components/utils/table.js"></script>
<style type="text/css">
.all{
width:600px;
height:375px;
/*  border: 1px solid blue; */
margin-left: 200px;
margin-top: 200px;
}
#time_tab{
width:600px;
height:375px;
border-bottom: 1px solid #dcdcdc;
}
#time_tab tr td{
border: 1px solid red;
text-align: center;
vertical-align: middle;
padding: 0;
}
td input{ 
width:100%;
height:100%;
border:1px solid #CF5C74; 
background:#F90;
  border-radius:2px; 
  text-align:center; 
  font-size:11px; 
  left:0;
  top:0;
  position:absolute;
    padding:11px 0; */
   margin:-1px 0 0 -1px; 
}
td.input{ position:relative; }
td.hover{background:#eee;}
</style>
<script type="text/javascript">
$(function(){
$("td").each(function(index, val){
//给每一个td分配id   
        $(this).attr('id', $(this).parent().attr('id')+"c"+($(this).index()+1));
      });
$('table td').click(function(){    
       if(!$(this).is('.input')){    
           $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){    
               var thisid = $(this).parent().siblings("th:eq(0)").text();    
               var thisvalue=$(this).val();    
               var thisclass = $(this).parent().attr("class");      
                
               $.ajax({    
                 type: 'POST',    
                 url:"../preparedata/queryPrepareDataName.do",    
                 data: "a="+thisvalue    
               });    
               $(this).parent().removeClass('input').html($(this).val() || 0);    
           });                        
       }    
   }).hover(function(){    
       $(this).addClass('hover');    
   },function(){    
       $(this).removeClass('hover');    
   });
})
</script>
</head>
<body>
<div class="all">
<table id="time_tab" class="table table-striped table-condensed">
<tr id="r1">
<td>00:00</td><td>00:30</td><td>01:00</td><td>01:30</td><td>02:00</td><td>02:30</td><td>03:00</td><td>03:30</td>
</tr>
<tr id="r2">
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr id="r3">
<td>04:00</td><td>04:30</td><td>05:00</td><td>05:30</td><td>06:00</td><td>06:30</td><td>07:00</td><td>07:30</td>
</tr>
<tr id="r4">
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr id="r5">
<td>08:00</td><td>08:30</td><td>09:00</td><td>09:30</td><td>10:00</td><td>10:30</td><td>11:00</td><td>11:30</td>
</tr>
<tr id="r6">
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr id="r7">
<td>12:00</td><td>12:30</td><td>13:00</td><td>13:30</td><td>14:00</td><td>14:30</td><td>15:00</td><td>15:30</td>
</tr>
<tr id="r8">
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr id="r9">
<td>16:00</td><td>16:30</td><td>17:00</td><td>17:30</td><td>18:00</td><td>18:30</td><td>19:00</td><td>19:30</td>
</tr>
<tr id="r10">
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr id="r11">
<td>20:00</td><td>20:30</td><td>21:00</td><td>21:30</td><td>22:00</td><td>22:30</td><td>23:00</td><td>23:30</td>
</tr>
<tr id="r12">
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
</table> 
</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值