jquery編集可能テーブル
4086 ワード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
td{
border:1px solid #CCC;
font-size:14px;
}
</style>
<script src="../scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//
$(document).ready(function(){
// ,
var tds=$("tr:gt(0) td");
//alert(tds.length);
//
tds.click(tdClick);
});
function tdClick(){
//
var td=$(this);
//
var tdText=td.text();
//alert(tdText);
//
td.empty();// td.html("");
// input
var input=$("<input>");
// input
input.attr("value",tdText);
// keyup
input.keyup(function(event){
var myevent=event||window.event;
//
if(myevent.keyCode==13){
//
var inputnode=$(this);
//
var inputText=inputnode.val();
// td
var mytd=inputnode.parent();
mytd.empty();
// td
mytd.html(inputText);
// td
mytd.click(tdClick);
}
});
input.blur(function(){
var mytd=$(this).parent();
var inputText=$(this).val();
mytd.empty();
mytd.html(inputText);
mytd.click(tdClick);
});
//
td.append(input);
//
var inputdom=input.get(0);
inputdom.select();
//td.html(input.val());
//
td.unbind("click");
};
</script>
</head>
<body>
<table width="691" style="text-align:center; width:1000px; border:1px solid #CCC; border-collapse:collapse;">
<tr>
<td width="63"> </td>
<td width="42"> </td>
<td width="42"> </td>
<td width="354"> </td>
<td width="213"> </td>
<td width="258"> </td>
</tr>
<tr>
<td> </td>
<td>14</td>
<td> </td>
<td> 55 </td>
<td>13599887676</td>
<td>[email protected]</td>
</tr>
<tr>
<td> </td>
<td>16</td>
<td> </td>
<td> 15 </td>
<td>13199887646</td>
<td>[email protected]</td>
</tr>
<tr>
<td> </td>
<td>24</td>
<td> </td>
<td> 55 </td>
<td>13899887672</td>
<td>[email protected]</td>
</tr>
<tr>
<td> </td>
<td>18</td>
<td> </td>
<td> 45 </td>
<td>13199887226</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>