Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > PHP > PHP Forum > ถามเรื่องเเสดงข้อมูลในตาราง td หน่อยครับ ให้มันเเสดงข้อมูลต่อไปเรื่อยๆยังไงครับ


[PHP] ถามเรื่องเเสดงข้อมูลในตาราง td หน่อยครับ ให้มันเเสดงข้อมูลต่อไปเรื่อยๆยังไงครับ

 
Topic : 134338



โพสกระทู้ ( 43 )
บทความ ( 0 )



สถานะออฟไลน์



ถามเรื่องเเสดงข้อมูลในตาราง td หน่อยครับ ให้มันเเสดงข้อมูลต่อไปเรื่อยๆยังไงครับ
ตอนนี้กด 5 ครั้งมันจะเเสดงที่ตารางข้างล่าง เเต่มันเเสดงเเค่ตารางเเรก อยากให้กดเเล้วเเสดงตางรางต่อไปเรื่อยๆ พอจะมีตัวอย่างไหมครับ

Code (PHP)
view source
print?
001.<!DOCTYPE html>
002.<html lang="en">
003.<head>
004.   <meta charset="UTF-8">
005.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
006.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
007.   <title>Document</title>
008.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
009.   <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
010. 
011.   <style>
012.      *{
013.         margin: 0;
014.         padding: 0;
015.      }
016. 
017. 
018.      .Analysis {
019. 
020.         width:70%;
021.         height: 139px;
022.         margin:0 auto;
023.         border:1px solid #000000;
024.         margin-bottom: 100px;
025. 
026.      }
027. 
028.      .containertt {
029. 
030.         width:70%;
031.         height: 50px;
032.         margin:0 auto;
033.         text-align: center;
034. 
035. 
036.      }
037.      table, th {
038.         border: 1px solid black;
039.         border-collapse: collapse;
040.         text-align: center;
041.      }
042.      td {
043.         border: 1px solid black;
044.         border-collapse: collapse;
045.         width: 50px;
046.         height: 50px;
047. 
048. 
049.      }
050. 
051.      .grid-container {
052.         display: grid;
053.         grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto auto;
054.         grid-gap: 2px;
055.         background-color: #2196F3;
056.         padding: 10px;
057. 
058.      }
059. 
060.      .grid-container > div {
061.         background-color: lightblue;
062.         text-align: center;
063.         padding: 10px ;
064.         font-size: 30px;
065.      }
066. 
067.      #item1 {
068.         grid-row: 1 / 4;
069.      }
070. 
071. 
072.   </style>
073.</head>
074.<body>
075. 
076. 
077. 
078.   <table class="table" id="demo1" style="background-color:#E6E6E6">
079.      <tr   >
080.         <td></td>
081.         <td></td>
082.         <td></td>
083.         <td></td>
084.         <td></td>
085.         <td></td>
086.         <td></td>
087.         <td></td>
088.         <td></td>
089.         <td></td>
090.         <td></td>
091.         <td></td>
092.         <td></td>
093.         <td></td>
094.         <td></td>
095.         <td></td>
096.         <td></td>
097.         <td></td>
098.         <td></td>
099.         <td></td>
100.      </tr>
101.      <tr>
102.         <td></td>
103.         <td></td>
104.         <td></td>
105.         <td></td>
106.         <td></td>
107.         <td></td>
108.         <td></td>
109.         <td></td>
110.         <td></td>
111.         <td></td>
112.         <td></td>
113.         <td></td>
114.         <td></td>
115.         <td></td>
116.         <td></td>
117.         <td></td>
118.         <td></td>
119.         <td></td>
120.         <td></td>
121.         <td></td>
122.      </tr>
123.      <tr>
124.         <td></td>
125.         <td></td>
126.         <td></td>
127.         <td></td>
128.         <td></td>
129.         <td></td>
130.         <td></td>
131.         <td></td>
132.         <td></td>
133.         <td></td>
134.         <td></td>
135.         <td></td>
136.         <td></td>
137.         <td></td>
138.         <td></td>
139.         <td></td>
140.         <td></td>
141.         <td></td>
142.         <td></td>
143.         <td></td>
144.      </tr>
145.   </table>
146. 
147.    
148. 
149. 
150.   <div class="grid-container" >
151. 
152.      <div onclick="myFunction(this)"  id="item1" class="test0"><font color=red>0</font></div>
153. 
154.      <div onclick="myFunction(this)" class="test" id="test2">2</div>
155. 
156.      <div onclick="myFunction(this)" class="test" id="test4">4</div>
157.      <div onclick="myFunction(this)" class="test" id="test6"><font color=red>6</font></div>
158.      <div onclick="myFunction(this)" class="test"><font color=red>8</font></div>
159.      <div onclick="myFunction(this)" class="test">10</div>
160.      <div onclick="myFunction(this)" class="test"><font color=red>12</font></div>
161.      <div onclick="myFunction(this)" class="test"><font color=red>14</font></div>
162.      <div onclick="myFunction(this)" class="test">16</div>
163.      <div onclick="myFunction(this)" class="test"><font color=red>18</font></div>
164.      <div onclick="myFunction(this)" class="test"><font color=red>20</font></div>
165.      <div onclick="myFunction(this)" class="test">22</div>
166.      <div onclick="myFunction(this)" class="test">24</div>
167.      <div onclick="myFunction(this)" class="test" id="test1">1</div>
168.      <div onclick="myFunction(this)" class="test" id="test3"><font color=red>3</font></div>
169.      <div onclick="myFunction(this)" class="test" id="test5">5</div>
170.      <div onclick="myFunction(this)" class="test">7</div>
171.      <div onclick="myFunction(this)" class="test"><font color=red>9</font></div>
172.      <div onclick="myFunction(this)" class="test">11</div>
173.      <div onclick="myFunction(this)" class="test">13</div>
174.      <div onclick="myFunction(this)" class="test"><font color=red>15</font></div>
175.      <div onclick="myFunction(this)" class="test">17</div>
176.      <div onclick="myFunction(this)" class="test">19</div>
177.      <div onclick="myFunction(this)" class="test">21</div>
178.      <div onclick="myFunction(this)" class="test">23</div>
179. 
180.      <!-- <div onClick="onClick()" class="test" id="test1"
181.      onMouseover="this.style.backgroundColor='yellow';"
182.      onMouseout="this.style.backgroundColor='lightblue';">333</div>
183. 
184.      <div  class="test"id="test2"
185.      onMouseover="this.style.backgroundColor='yellow';"
186.      onMouseout="this.style.backgroundColor='lightblue';">444</div>
187.       
188.      <div class="test"   id="test3"
189.      mouseenter="this.style.backgroundColor='yellow';"
190.      mouseleave="this.style.backgroundColor='lightblue';"
191.      >555</div> -->
192. 
193.   </div>
194.   <script>
195.      myFunction = i => $("#demo1 td:empty:first").html($(i).html())
196.      var tooClick = 0;
197.var totalClick = 0; // จำนวนคลิกทั้งหมด
198.var evenClick = 0; // จำนวนคลิกเลขคู่
199.var oddClick = 0; // จำนวนคลิกเลขคี่
200. 
201.var clicks = 0;
202.var po = 0;
203.function clickCount()
204.{
205.   clicks += 1;    //ตรงนี้ใส่ clicks += 1;
206.   po = Math.floor(Math.random() * 4);
207.}
208. 
209. 
210. 
211.function reset()
212.{
213.   $(".test").css("background-color", "lightblue");
214.   $(".test1").css("background-color", "lightblue");
215.   $(".test2").css("background-color", "lightblue");
216.   $("#test1").css("background-color", "lightblue");
217.   $("#test2").css("background-color", "lightblue");
218.   evenClick=0;
219.   oddClick=0;
220.   tooClick=0;
221.    
222.   result=false;
223.   return;
224.}
225.function pop() {
226.   alert("Hello! I am an alert box!");
227.   window.location.reload();
228.}
229. 
230.$(function(){
231.   $(".test").click(function(){
232. 
233.      clickCount();
234. 
235.      document.getElementById("clicks").innerHTML = clicks;
236.      document.getElementById("demo").innerHTML = $(this).text();
237.      document.getElementById("ran").innerHTML = po;
238. 
239. 
240.      if ($(this).text()%2==0) {
241.         evenClick++;      //ตรงนี้ใส่ evenClick++;
242.         oddClick++;        //ตรงนี้ใส่ oddClick++;
243.         if(evenClick % 4 ==0){
244.            if (po%2==0) {
245.               $("#test1,#test2").css("background-color", "yellow");
246.            }else if (po%2==1) {
247.               $("#test3,#test4").css("background-color", "#80E12A");
248.            }
249.         }else if(evenClick % 5 ==0){   //กดครั้งที่5
250.            document.getElementById("hot").innerHTML = $(this).text();
251.            reset();
252.         }
253. 
254.      }else if ($(this).text()%2==1) {
255.         oddClick++;          //ตรงนี้ใส่ oddClick++;
256.         evenClick++;        //ตรงนี้ใส่ evenClick++;
257.         if(oddClick % 4 ==0){
258.            if (po%2==0) {
259.               $("#test5,#test6").css("background-color", "#73E1E1");
260.            }else if (po%2==1) {
261.               $("#test3,#test4").css("background-color", "#80E12A");
262.            }
263.         }else if(oddClick % 5 ==0){    //กดครั้งที่5
264.            document.getElementById("hot").innerHTML = $(this).text();
265.             
266.            reset();
267.         }
268.      }
269.      if (clicks>60) {
270.         pop();
271.      }
272. 
273.   });
274.});
275. 
276.</script>
277. 
278.<p>Clicks: <a id="clicks">0</a></p>
279.<p id="demo"></p>
280.<p>ran: <a id="ran">0</a></p>
281.</script>
282.<table class="table" id="demo2" style="background-color:#E6E6E6"  >
283.   <tr>
284.      <td>ครั้งที่5</td>
285.      <td id="hot"></td>
286.      <td id="hot"></td>
287.      <td id="hot"></td>
288.      <td></td>
289.      <td></td>
290.      <td></td>
291.      <td></td>
292.      <td></td>
293.      <td></td>
294.      <td></td>
295.      <td></td>
296.      <td></td>
297.      <td></td>
298.      <td></td>
299.      <td></td>
300.      <td></td>
301.      <td></td>
302.      <td></td>
303.      <td></td>
304.   </tr>
305.</table>
306. 
307. 
308.<table>
309.   <tr>
310.      <td>ถูก</td>
311.      <td></td>
312.      <td></td>
313.      <td></td>
314.      <td></td>
315.      <td></td>
316.      <td></td>
317.      <td></td>
318.      <td></td>
319.      <td></td>
320.      <td></td>
321.      <td></td>
322.      <td></td>
323.      <td></td>
324.      <td></td>
325.      <td></td>
326.      <td></td>
327.      <td></td>
328.      <td></td>
329.      <td></td>
330.   </tr>
331.   <tr>
332.      <td>ผิด</td>
333.      <td></td>
334.      <td></td>
335.      <td></td>
336.      <td></td>
337.      <td></td>
338.      <td></td>
339.      <td></td>
340.      <td></td>
341.      <td></td>
342.      <td></td>
343.      <td></td>
344.      <td></td>
345.      <td></td>
346.      <td></td>
347.      <td></td>
348.      <td></td>
349.      <td></td>
350.      <td></td>
351.      <td></td>
352.   </tr>
353.</table>
354. 
355. 
356.</body>
357.</html>




Tag : PHP, HTML, CSS, JavaScript


ประวัติการแก้ไข
2019-10-14 08:23:54
2019-10-14 08:24:38
2019-10-14 08:27:50
2019-10-14 08:29:38
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2019-10-14 08:22:56 By : 1768876979829526 View : 1429 Reply : 4
 

 

No. 1



โพสกระทู้ ( 4,765 )
บทความ ( 8 )



สถานะออฟไลน์


Code (JavaScript)
view source
print?
01.$(function(){
02.   $(".test").click(function(){
03. 
04.      clickCount();
05. 
06.      document.getElementById("clicks").innerHTML = clicks;
07.      document.getElementById("demo").innerHTML = $(this).text();
08.      document.getElementById("ran").innerHTML = po;
09. 
10. 
11.      if ($(this).text()%2==0) {
12.         evenClick++;      //ตรงนี้ใส่ evenClick++;
13.         oddClick++;        //ตรงนี้ใส่ oddClick++;
14.         if(evenClick % 4 ==0){
15.            if (po%2==0) {
16.               $("#test1,#test2").css("background-color", "yellow");
17.            }else if (po%2==1) {
18.               $("#test3,#test4").css("background-color", "#80E12A");
19.            }
20.         }else if(evenClick % 5 ==0){   //กดครั้งที่5
21.            var clickText = $(this).text();
22.            $.each($('.numberTime td'), function(index, item) {
23.                if (item.innerHTML === '') {
24.                    item.innerHTML = clickText;
25.                    return false;
26.                }
27.            });
28.            //document.getElementById("hot").innerHTML = $(this).text();
29.            reset();
30.         }
31. 
32.      }else if ($(this).text()%2==1) {
33.         oddClick++;          //ตรงนี้ใส่ oddClick++;
34.         evenClick++;        //ตรงนี้ใส่ evenClick++;
35.         if(oddClick % 4 ==0){
36.            if (po%2==0) {
37.               $("#test5,#test6").css("background-color", "#73E1E1");
38.            }else if (po%2==1) {
39.               $("#test3,#test4").css("background-color", "#80E12A");
40.            }
41.         }else if(oddClick % 5 ==0){    //กดครั้งที่5
42.            var clickText = $(this).text();
43.            $.each($('.numberTime td'), function(index, item) {
44.                if (item.innerHTML === '') {
45.                    item.innerHTML = clickText;
46.                    return false;
47.                }
48.            });
49.            //document.getElementById("hot").innerHTML = $(this).text();
50.             
51.            reset();
52.         }
53.      }
54.      if (clicks>60) {
55.         pop();
56.      }
57. 
58.   });
59.});



Code
<table class="table" id="demo2" style="background-color:#E6E6E6"  >
   <tr class="numberTime">
      <td>ครั้งที่5</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>



ประวัติการแก้ไข
2019-10-14 11:55:18
2019-10-14 11:55:44
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-10-14 11:54:27 By : mr.v
 

 

No. 2



โพสกระทู้ ( 43 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : mr.v เมื่อวันที่ 2019-10-14 11:54:27
รายละเอียดของการตอบ ::
ขอบคุณครับ ถาม2อย่างครับ
ถ้าเปลี่ยนให้เเสดงรูปต้องเปลี่ยนอะไรบ้างครับ
Code (PHP)
view source
print?
01.var clickText = numberValue;
02.            $.each($('.numberTime td'), function(index, item) {
03.                if (item.innerHTML === '') {
04.                    item.innerHTML = clickText;
05.                    return false;
06.                }
07.            });
08. 
09.<img id="img1" src="img/yes.png"/>


เช็คตัวเลขว่ามีเลขที่มากกว่า10เเต่น้อยกว่า20 กี่ตัวยังไงครับ
Code (PHP)
view source
print?
01.$numbers = [];
02.$a=0;
03.for ($i = 0; $i < 10; $i++) {
04.    $numbers[] = rand(1, 36);
05.}
06. 
07.echo "Random numbers: ";
08.for ($i = 0; $i < 6; $i++) {
09.     
10.    echo $numbers[$i], ", ";
11.     
12.}


ประวัติการแก้ไข
2019-10-14 17:15:51
2019-10-14 17:16:41
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-10-14 12:57:26 By : 1768876979829526
 

 

No. 3



โพสกระทู้ ( 4,765 )
บทความ ( 8 )



สถานะออฟไลน์


item.innerHTML = '<img...>';
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-10-15 02:40:30 By : mr.v
 

 

No. 4



โพสกระทู้ ( 43 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : mr.v เมื่อวันที่ 2019-10-15 02:40:30
รายละเอียดของการตอบ ::


เช็คตัวเลขว่ามีเลขที่มากกว่า10เเต่น้อยกว่า20 กี่ตัวยังไงครับ
Code (JavaScript)
view source
print?
01.$numbers = [];
02.$a=0;
03.for ($i = 0; $i < 10; $i++) {
04.    $numbers[] = rand(1, 36);
05.}
06. 
07.echo "Random numbers: ";
08.for ($i = 0; $i < 6; $i++) {
09.     
10.    echo $numbers[$i], ", ";
11.     
12.}


ประวัติการแก้ไข
2019-10-16 16:32:12
2019-10-16 16:33:05
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-10-15 19:41:55 By : 1768876979829526
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ถามเรื่องเเสดงข้อมูลในตาราง td หน่อยครับ ให้มันเเสดงข้อมูลต่อไปเรื่อยๆยังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่