<!--PHP編程實戰(zhàn)-->
<!--JSON & Ajax -->
<!--15-18-->
<!--用圖形應用程序操作表格單元格的背景顏色-->
<html>
<head>
<title>Drawing Grid Exapmle</title>
<style type="text/css">
#grid, #palette {
padding: 0px;
margin: 0px;
border-collapse: collapse;
}
#palette td, #grid td {
width: 20px;
height: 20px;
}
#grid td {
border: 1px solid #cccccc;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
//10*10的表格
for (i = 0; i < 10; ++i) {
$("#grid").append(
"<tr>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"</tr>"
);
}
var active_color = "rgb(0,0,0)";
//調色板onClick事件,用active_color記錄
$("#palette td").each(
function (index) {
$(this).bind(
"click",
function () {
active_color = $(this).css("background-color");
$("#debug_palette_color").html("active palette color is: " +
"<span style='width:20px;height:20px;background-color:>" + active_color + ";'>" + active_color + "</span>");
}
)
}
)
//用active_color繪制選中單元格背景色
$("#grid td").each(
function (index) {
$(this).bind(
"click",
function () {
$(this).css("background-color", active_color);
}
)
}
)
})
</script>
</head>
<body>
<p><strong>Palette</strong></p>
<table id="palette">
<tr>
<td style="background-color: rgb(0,0,0);"> </td>
<td style="background-color: rgb(119,119,119);"> </td>
<td style="background-color:rgb(255,255,255);"> </td>
<td style="background-color: rgb(255,0,0);"> </td>
<td style="background-color: rgb(0,255,0);"> </td>
<td style="background-color:rgb(0,0,255);"> </td>
<td style="background-color: rgb(255,255,0);"> </td>
</tr>
</table>
<p><strong>Draw!</strong></p>
<table id="grid"></table>
<p><em>Debug console: </em></p>
<div id="debug_palette_color"></div>
</body>
</html>
重點
- border-collapse:collapse, 使得表格的內部邊界和邊緣邊界有相同的厚度.
- active_color作為中間變量,保存被點擊調色板的顏色值,并在點擊繪圖板時使用.
- rgb(255,0,0)格式是CSS3規(guī)范的組成部分.
- 這里調色板的七種顏色是固定不變的
下面的代碼遍歷對象并綁定行為
$("#palette td").each(
function (index) {
$(this).bind(
