<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> // ใช้ jquery ในการจัดการ event $(function () { var data = {}; // ข้อมูลตาราง $("#grid td").mousedown(function (event) { // หากมีการคลิก if ($(this).toggleClass("plot").hasClass("plot")) { // หากเป็นการคลิกเพื่อเพิ่ม data[this.title] = true; // ให้เพิ่มข้อมูลตาราง } else { // คลิกเพื่อลบ delete data[this.title]; } }).mouseover(function (event) { $(this).addClass("over"); }).mouseout(function (event) { $(this).removeClass("over"); }); $(document.forms[0]).on("submit", function () { this.json_data.value = JSON.stringify(data); // ส่งข้อมูลเป็น JSON }); }); </script> <title>Grid Plotter Example</title> <style type="text/css"> #grid { border-collapse: collapse; } #grid th, #grid td { width: 20px; height: 20px; border: black solid 1px; padding: 0px; font-family: Verdana; font-size: 10px; text-align: center; } #grid th { background-color: #cccccc; } .plot { background-color: #ff9900; } .over { background-color: #ffff00; } .over.plot { background-color: #990000; } </style> </head> <body> <form action="" method="get"> <table class="grid" id="grid" style="float: left;"> <tr> <?php // สร้างตาราง HTML ด้วย PHP echo "<tr><th></th>"; for ($x = 1; $x <= 32; $x++) { echo "<th>$x</th>"; } echo "</tr>"; for ($y = 1; $y <= 32; $y++) { echo "<tr>"; for ($x = 0; $x < 33; $x++) { if ($x) { echo "<td title=\"$x:$y\"></td>"; } else { echo "<th>$y</th>"; } } echo "</tr>"; } ?> </table> <textarea cols="40" rows="20" readonly="readonly" style="float: left;"> <?php // ข้อมูลพื้นที่ที่ผู้ใช้สร้างและส่งมา จะเอาไปใช้ยังไงค่อยว่ากันอีกที print_r(($_GET['json_data']) ? json_decode($_GET['json_data'], true) : ''); ?> </textarea> <hr style="clear: both;" /> <input type="hidden" name="json_data" /> <input type="submit" value="Submit" /> </form> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
Load balance : Server 04
Load balance : Server 04
