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,027

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



 

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

 



Topic : 134338



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



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




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

Code (PHP)
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->

   <style>
      *{
         margin: 0;
         padding: 0;
      }


      .Analysis {

         width:70%;
         height: 139px;
         margin:0 auto;
         border:1px solid #000000;
         margin-bottom: 100px;

      }

      .containertt {

         width:70%;
         height: 50px;
         margin:0 auto;
         text-align: center;


      }
      table, th {
         border: 1px solid black;
         border-collapse: collapse;
         text-align: center;
      }
      td {
         border: 1px solid black;
         border-collapse: collapse;
         width: 50px;
         height: 50px;


      }

      .grid-container {
         display: grid;
         grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto auto;
         grid-gap: 2px;
         background-color: #2196F3;
         padding: 10px;

      }

      .grid-container > div {
         background-color: lightblue;
         text-align: center;
         padding: 10px ;
         font-size: 30px;
      }

      #item1 {
         grid-row: 1 / 4;
      }


   </style>
</head>
<body>



   <table class="table" id="demo1" style="background-color:#E6E6E6">
      <tr   >
         <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></td>
      </tr>
      <tr>
         <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></td>
      </tr>
      <tr>
         <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></td>
      </tr>
   </table>

   


   <div class="grid-container" >

      <div onclick="myFunction(this)"  id="item1" class="test0"><font color=red>0</font></div>

      <div onclick="myFunction(this)" class="test" id="test2">2</div>

      <div onclick="myFunction(this)" class="test" id="test4">4</div> 
      <div onclick="myFunction(this)" class="test" id="test6"><font color=red>6</font></div>
      <div onclick="myFunction(this)" class="test"><font color=red>8</font></div>
      <div onclick="myFunction(this)" class="test">10</div>
      <div onclick="myFunction(this)" class="test"><font color=red>12</font></div>
      <div onclick="myFunction(this)" class="test"><font color=red>14</font></div> 
      <div onclick="myFunction(this)" class="test">16</div>
      <div onclick="myFunction(this)" class="test"><font color=red>18</font></div>
      <div onclick="myFunction(this)" class="test"><font color=red>20</font></div>
      <div onclick="myFunction(this)" class="test">22</div>
      <div onclick="myFunction(this)" class="test">24</div>
      <div onclick="myFunction(this)" class="test" id="test1">1</div>
      <div onclick="myFunction(this)" class="test" id="test3"><font color=red>3</font></div>
      <div onclick="myFunction(this)" class="test" id="test5">5</div>
      <div onclick="myFunction(this)" class="test">7</div>
      <div onclick="myFunction(this)" class="test"><font color=red>9</font></div>
      <div onclick="myFunction(this)" class="test">11</div>
      <div onclick="myFunction(this)" class="test">13</div>
      <div onclick="myFunction(this)" class="test"><font color=red>15</font></div>
      <div onclick="myFunction(this)" class="test">17</div>
      <div onclick="myFunction(this)" class="test">19</div>
      <div onclick="myFunction(this)" class="test">21</div>
      <div onclick="myFunction(this)" class="test">23</div>

      <!-- <div onClick="onClick()" class="test" id="test1"
      onMouseover="this.style.backgroundColor='yellow';"
      onMouseout="this.style.backgroundColor='lightblue';">333</div>

      <div  class="test"id="test2"
      onMouseover="this.style.backgroundColor='yellow';"
      onMouseout="this.style.backgroundColor='lightblue';">444</div>
      
      <div class="test"   id="test3"
      mouseenter="this.style.backgroundColor='yellow';"
      mouseleave="this.style.backgroundColor='lightblue';"
      >555</div> -->

   </div>
   <script>
      myFunction = i => $("#demo1 td:empty:first").html($(i).html())
      var tooClick = 0;
var totalClick = 0; // จำนวนคลิกทั้งหมด
var evenClick = 0; // จำนวนคลิกเลขคู่
var oddClick = 0; // จำนวนคลิกเลขคี่

var clicks = 0;
var po = 0;
function clickCount()
{
   clicks += 1;    //ตรงนี้ใส่ clicks += 1;
   po = Math.floor(Math.random() * 4);
}



function reset()
{
   $(".test").css("background-color", "lightblue");
   $(".test1").css("background-color", "lightblue");
   $(".test2").css("background-color", "lightblue");
   $("#test1").css("background-color", "lightblue");
   $("#test2").css("background-color", "lightblue");
   evenClick=0;
   oddClick=0;
   tooClick=0;
   
   result=false;
   return;
}
function pop() {
   alert("Hello! I am an alert box!");
   window.location.reload();
}

$(function(){
   $(".test").click(function(){

      clickCount();

      document.getElementById("clicks").innerHTML = clicks;
      document.getElementById("demo").innerHTML = $(this).text();
      document.getElementById("ran").innerHTML = po;


      if ($(this).text()%2==0) {
         evenClick++;      //ตรงนี้ใส่ evenClick++;
         oddClick++;        //ตรงนี้ใส่ oddClick++;
         if(evenClick % 4 ==0){
            if (po%2==0) {
               $("#test1,#test2").css("background-color", "yellow");
            }else if (po%2==1) {
               $("#test3,#test4").css("background-color", "#80E12A");
            }
         }else if(evenClick % 5 ==0){   //กดครั้งที่5
            document.getElementById("hot").innerHTML = $(this).text();
            reset();
         }

      }else if ($(this).text()%2==1) {
         oddClick++;          //ตรงนี้ใส่ oddClick++;
         evenClick++;        //ตรงนี้ใส่ evenClick++;
         if(oddClick % 4 ==0){
            if (po%2==0) {
               $("#test5,#test6").css("background-color", "#73E1E1");
            }else if (po%2==1) {
               $("#test3,#test4").css("background-color", "#80E12A");
            }
         }else if(oddClick % 5 ==0){    //กดครั้งที่5
            document.getElementById("hot").innerHTML = $(this).text();
            
            reset();
         }
      }
      if (clicks>60) {
         pop();
      }

   });
});

</script>

<p>Clicks: <a id="clicks">0</a></p>
<p id="demo"></p>
<p>ran: <a id="ran">0</a></p>
</script>
<table class="table" id="demo2" style="background-color:#E6E6E6"  >
   <tr>
      <td>ครั้งที่5</td>
      <td id="hot"></td>
      <td id="hot"></td>
      <td id="hot"></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>


<table>
   <tr>
      <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></td>
   </tr>
   <tr>
      <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></td>
   </tr>
</table>


</body>
</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 : 1327 Reply : 4
 

 

No. 1



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



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


Code (JavaScript)
$(function(){
   $(".test").click(function(){

      clickCount();

      document.getElementById("clicks").innerHTML = clicks;
      document.getElementById("demo").innerHTML = $(this).text();
      document.getElementById("ran").innerHTML = po;


      if ($(this).text()%2==0) {
         evenClick++;      //ตรงนี้ใส่ evenClick++;
         oddClick++;        //ตรงนี้ใส่ oddClick++;
         if(evenClick % 4 ==0){
            if (po%2==0) {
               $("#test1,#test2").css("background-color", "yellow");
            }else if (po%2==1) {
               $("#test3,#test4").css("background-color", "#80E12A");
            }
         }else if(evenClick % 5 ==0){   //กดครั้งที่5
            var clickText = $(this).text();
            $.each($('.numberTime td'), function(index, item) {
                if (item.innerHTML === '') {
                    item.innerHTML = clickText;
                    return false;
                }
            });
            //document.getElementById("hot").innerHTML = $(this).text();
            reset();
         }

      }else if ($(this).text()%2==1) {
         oddClick++;          //ตรงนี้ใส่ oddClick++;
         evenClick++;        //ตรงนี้ใส่ evenClick++;
         if(oddClick % 4 ==0){
            if (po%2==0) {
               $("#test5,#test6").css("background-color", "#73E1E1");
            }else if (po%2==1) {
               $("#test3,#test4").css("background-color", "#80E12A");
            }
         }else if(oddClick % 5 ==0){    //กดครั้งที่5
            var clickText = $(this).text();
            $.each($('.numberTime td'), function(index, item) {
                if (item.innerHTML === '') {
                    item.innerHTML = clickText;
                    return false;
                }
            });
            //document.getElementById("hot").innerHTML = $(this).text();
            
            reset();
         }
      }
      if (clicks>60) {
         pop();
      }

   });
});



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)
var clickText = numberValue;
            $.each($('.numberTime td'), function(index, item) {
                if (item.innerHTML === '') {
                    item.innerHTML = clickText;
                    return false;
                }
            });

<img id="img1" src="img/yes.png"/>


เช็คตัวเลขว่ามีเลขที่มากกว่า10เเต่น้อยกว่า20 กี่ตัวยังไงครับ
Code (PHP)
$numbers = [];
$a=0;
for ($i = 0; $i < 10; $i++) {
    $numbers[] = rand(1, 36);
}

echo "Random numbers: ";
for ($i = 0; $i < 6; $i++) {
	
    echo $numbers[$i], ", ";
    
}




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

 

No. 3



โพสกระทู้ ( 4,720 )
บทความ ( 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)


$numbers = [];
$a=0;
for ($i = 0; $i < 10; $i++) {
    $numbers[] = rand(1, 36);
}

echo "Random numbers: ";
for ($i = 0; $i < 6; $i++) {
	
    echo $numbers[$i], ", ";
    
}






ประวัติการแก้ไข
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 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

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