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

最新推荐文章于 2024-07-11 10:55:03 发布

guorun18

最新推荐文章于 2024-07-11 10:55:03 发布

阅读量4.3k

点赞数

分类专栏： jquery 文章标签： json 传值 table

本文链接：https://blog.csdn.net/guorun18/article/details/45843457

版权

jquery 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

本人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>