jqは編集可能なテーブルを実現する
3502 ワード
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jquery: </title>
<link type="text/css" rel="stylesheet" href="css/editTable.css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/editTable.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td>00001</td>
<td> 3</td>
</tr>
<tr>
<td>00002</td>
<td> 4</td>
</tr>
<tr>
<td>00003</td>
<td> 5</td>
</tr>
<tr>
<td>00004</td>
<td> 6</td>
</tr>
</tbody>
</table>
</body>
</html>
editTable.jsファイル
// javascript
/*
$(document).ready(function(){
});*/
//
$(function() {
// ,
$("tbody tr:even").css("background-color", "#ECE9D8");
//
var numTd = $("tbody td:even");
// 。
numTd.click(function() {
// td,this cilck td
var tdObj = $(this);
if(tdObj.children("input").length()>0){
// input ， click
return false;
}
// td
var text = tdObj.html();
// td
tdObj.html("");
//
//
// 16px
// ， td
//
// td ，
// td ，
var inputObj = $("<input type = 'text'>")
.css("border-width", "0")
.css("font-size", "16px")
.width(tdObj.width())
.css("background-color", tdObj.css("background-color"))
.val(text)
.appendTo(tdObj);
//
inputObj.get(0).select();
inputObj.click(function(){
return false;
});
// ESC
inputObj.keyup(function(event){
//
var keycode = event.which;
//
if(keycode == 13){
//
var inputtest = $(this).val();
tdObj.html(inputtest);
}
// esc
if(keycode == 27){
tdObj.html(text);
}
});
});
});