<!--PHP编程实战-->
<!--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规范的组成部分.
- 这里调色板的七种颜色是固定不变的
下面的代码遍历对象并绑定行为
$("#palette td").each(
function (index) {
$(this).bind(
网友评论