<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/bootstrap/css/bootstrap-responsive.css" />
<script src="${pageContext.request.contextPath}/script/jquery.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style type="text/css">
table {border-collapse: collapse;}
</style>
<script type="text/javascript">
$(function(){
//$("tbody tr:odd").css("backgroud-color","#333");
$("tbody tr:even").css("backgroud-color","#333");
$("tbody td:even").css("backgroud-color","#333");
var numId = $("tbody td:even");
numId.click(function(){
//alert($(this).index);
var inputObj = $("<input type = 'text'/>")
var tdObj = $(this);
if(tdObj.children("input").length>0){
return false;//当前td中有input,不处理下面的内容
}
var text = tdObj.html();
inputObj.css("border-width","0px")
.width(tdObj.width())
.css("font-size","16px")
.css("background-color",tdObj.css("background-color"))
.val(text);
//清空内容
tdObj.html("");
//添加到td
inputObj.appendTo(tdObj);
//选中
//inputObj.get(0).select();
inputObj.trigger("focus").trigger("select");
//取消事件
inputObj.click(function(){
return false;
});
inputObj.keyup(function(){
var keycode = event.which;
if(keycode == 13){//回车
var content = $(this).val();
tdObj.html(content);
}
if(keycode == 27){
//还原内容
tdObj.html(text);
}
});
});
});
</script>
</head>
<body>
<script src="${pageContext.request.contextPath}/script/bootstrap/js/bootstrap.js"></script>
<div class="container">
<h1>可编辑的表格</h1>
<div class="row">
<table class="table table-bordered table-striped" >
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>n1000</td>
<td>tom</td>
<td>20</td>
</tr>
<tr>
<td>n2000</td>
<td>tom</td>
<td>21</td>
</tr>
<tr>
<td>n3000</td>
<td>tom</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
