jquery 학습 노트 2 편집 가능 한 표 구현
실례 도:
코드:
<!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 runat="server">
<title></title>
<script type="text/jscript" src="jquery-1.4.2.min.js"></script>
<script type="text/jscript" language="javascript">
// ready :
$(function() {
// tbody tr #ECE9D8
$("tbody tr:even").css("background-color", "#ECE9D8");
// tbody td numTd
var numTd = $("tbody td:even");
//
numTd.click(function() {
// jquery
var tdObj = $(this);
// input click
if (tdObj.children("input").length > 0) {
return false;
}
// td text
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);
// focus select
inputObj.trigger("focus").trigger("select");
//
inputObj.click(function() {
return false;
});
// keyup
inputObj.keyup(function(event) {
//
var keycode = event.which;
//
if (keycode == 13) {
//
var inputtext = $(this).val();
// td
tdObj.html(inputtext);
}
// esc
if (keycode == 27) {
// td text
tdObj.html(text);
}
});
});
});
</script>
<style type="text/css">
table
{
border: 1px solid black;
border-collapse: collapse;
width: 400px;
}
table td
{
border: 1px solid black;
width: 50%;
}
table th
{
border: 1px solid black;
width: 50%;
}
tbody th
{
background-color: #A3BAE9;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<thead>
<tr>
<th colspan="2">
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
</th>
<th>
</th>
</tr>
<tr>
<td>
000001
</td>
<td>
</td>
</tr>
<tr>
<td>
000002
</td>
<td>
</td>
</tr>
<tr>
<td>
000003
</td>
<td>
</td>
</tr>
<tr>
<td>
000004
</td>
<td>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
