ถาม javascript หน่อยครับ กดรูปเเล้วให้ขึ้นที่ td ยังไงครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ถาม javascript หน่อยครับ กดรูปเเล้วให้ขึ้นที่ td ยังไงครับ

ถาม javascript หน่อยครับ กดรูปเเล้วให้ขึ้นที่ td ยังไงครับ
กดรูปหรือเลขด้านล่าง เเล้วใช้มันโชว์ตางรางเเรก กด3ทีขึ้นตารางเเรก กดอีก3ทีก็ให้ขึ้นตารางถัดไป



<!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;
		}
		table, th {
			border: 1px solid black;
			border-collapse: collapse;
			text-align: center;
			width: 100%;
		}
		td {
			border: 1px solid black;
			border-collapse: collapse;
			width: 40px;
			height: 40px;

		}
		.set1 {
			border: none;
			outline: none;
			padding: 10px 16px;
			background-color: #f1f1f1;
			cursor: pointer;
			font-size: 18px;
		}

		/* Style the active class, and buttons on mouse-over */
		.active, .set1:hover {
			background-color: #666;
			color: white;
		}
		
		div.f1{
			width: 1000px;
		}
	</style>
</head>
<body>

	<script>
		
		myFunction = i => $(".demo1 td:empty:first").html($(i).html());
	</script>
	<div >
	
		<table width="1000" class="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><td></td><td></td><td></td><td></td></tr>

		
	</table>
</div>
<div class="f1">
		<table>
		<tbody>
			<tr>
				<td id="test1">
					<table style="border: 0px;" >
						<tbody>
							<tr onclick="myFunction(this)" >
								<td width="50%" class="set1" style="border: 0px;">1</td>
								<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number1.png"></td>
							</tr>
						</tbody>
						
					</table>

				</td>
				<td id="test2">
					<table style="border: 0px;" >
						<tbody>
							<tr onclick="myFunction(this)" >
								<td width="50%" class="set1" style="border: 0px;">2</td>
								<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number2.png"></td>
							</tr>
						</tbody>
						
					</table>

				</td>
				<td id="test1">
					<table style="border: 0px;" >
						<tbody>
							<tr onclick="myFunction(this)" >
								<td width="50%" class="set1" style="border: 0px;">3</td>
								<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number3.png"></td>
							</tr>
						</tbody>
						
					</table>

				</td>
				<td id="test1">
					<table style="border: 0px;" >
						<tbody>
							<tr onclick="myFunction(this)" >
								<td width="50%" class="set1" style="border: 0px;">4</td>
								<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number4.png"></td>
							</tr>
						</tbody>
						
					</table>

				</td>
				<td id="test1">
					<table style="border: 0px;" >
						<tbody>
							<tr onclick="myFunction(this)" >
								<td width="50%" class="set1" style="border: 0px;">5</td>
								<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number5.png"></td>
							</tr>
						</tbody>
						
					</table>

				</td>
				<td id="test1">
					<table style="border: 0px;" >
						<tbody>
							<tr onclick="myFunction(this)" >
								<td width="50%" class="set1" style="border: 0px;">6</td>
								<td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number6.png"></td>
							</tr>
						</tbody>
						
					</table>

				</td>
			</tr>
		</tbody>
	</table>
	</div>
	</body>
	</html>



Golff Sinlapachai 110.77.234.xxx 24-10-2019 16:23:57

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานด้วย Facebook คลิก )
 ความคิดเห็นที่ 1
 ศึกษาการจัดการ DOM ด้วย jQuery เป็นแนวทาง


Ninenik 124.120.200.xxx 24-10-2019
 ความคิดเห็นที่ 2
ถามหน่อยครับ พอกด3ทีเเล้วมันเเสดงสีพื้นหลังที่เลข เเล้วให้เเสดงที่ผลด้านล่าง
ตอนนี้มันเเสดงผลเเต่ครั้งเเรก ครั้งต่อไปไม่เเสดงต้องทำยังไงครับ
อีกอย่างถ้าเลขซ้ากันก็ให้เเดสงด้วยครับเหมือนในรูป 554 เเต่มันเเสดงเเค่ 54




<!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;
   }
   table, th {
      border: 1px solid black;
      border-collapse: collapse;
      text-align: center;
      width: 100%;
   }
   td {
      border: 1px solid black;
      border-collapse: collapse;
      width: 50px;
      height: 25px;

   }

   .set1,.set2,.set3,.set4,.set5,.set6 {
      border: none;
      outline: none;

      background-color: #f1f1f1;
      cursor: pointer;
      font-size: 25px;
   }


   .active, .set1:hover {
      background-color: #666;
      color: black;
   }
   .active, .set2:hover {
      background-color: #666;
      color: black;
   }
   .active, .set3:hover {
      background-color: #666;
      color: black;
   }
   .active, .set4:hover {
      background-color: #666;
      color: black;
   }
   .active, .set5:hover {
      background-color: #666;
      color: black;
   }
   .active, .set6:hover {
      background-color: #666;
      color: black;
   }

   div.f1{
      width: 1000px;
   }
   div.f2{
      width: 1000px;
   }
   .set1.bg-color1{
      background: #FFFF00 !important;
   }
   .set2.bg-color1{
      background: #FFFF00 !important;
   }
   .set3.bg-color1{
      background: #FFFF00 !important;
   }
   .set4.bg-color1{
      background: #FFFF00 !important;
   }
   .set5.bg-color1{
      background: #FFFF00 !important;
   }
   .set6.bg-color1{
      background: #FFFF00 !important;
   }
</style>
</head>
<body>

  <script>
   var aaa = '';
   var sum1 = 0;
   var clicks  = 0;
   var clicksf = 0;
   //myFunction = i => $(".demo1 td:empty:first").html($(i).html());

   function clickCount()
   {
      clicks  +=1;    
      clicksf +=1;

   }

   function reset()
   {
      $(".set1").removeClass("bg-color1");
      $(".set2").removeClass("bg-color1");
      $(".set3").removeClass("bg-color1");
      $(".set4").removeClass("bg-color1");
      $(".set5").removeClass("bg-color1");
      $(".set6").removeClass("bg-color1");
      
      clicks=1;

      return;
   }

   $(function(){
      $(".set1,.set2,.set3,.set4,.set5,.set6").click(function (e) {
         clickCount();
         e.preventDefault();
         var img = $("img", this).attr("src");
         var numberValue = $(this).text(); 
         
         
         var is_bg_color1 = $(this).hasClass("bg-color1");
         //var is_bg_color2 = $(this).hasClass("bg-color1");
         //var is_bg_color3 = $(this).hasClass("bg-color1");
         // console.log(numberValue);
         // console.log(clicks);
         document.getElementById("clicks").innerHTML = clicksf;


         if(is_bg_color1){
           console.log("y");
         //var test1 = '<img/yes.png"';
         $.each($('.yes td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = '<img src=img/yes.png width=35 height=35>';
               return false;
            }
         });

         sum1++;
      }
      if(!is_bg_color1 && clicks%4==0){
        console.log("n");
         //var test1 = '<img/yes.png"';
         $.each($('.yes td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = '<img src=img/no.png width=35 height=35>';
               return false;
            }
         });

         //sum1++;
      }

      document.getElementById("sum1").innerHTML = sum1;

      if (numberValue=='') {
         $.each($('.demo1 td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = "<img src="" + img + ""width="20px" height="20px">";
               return false;
            }
         });
      }
      if (numberValue==1) {
        $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number1.png width=20 height=20>';
            return false;
         }
      });
     }else if(numberValue==2){
      $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number2.png width=20 height=20>';
            return false;
         }
      });
   }else if(numberValue==3){
      $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number3.png width=20 height=20>';
            return false;
         }
      });
   }else if(numberValue==4){
      $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number4.png width=20 height=20>';
            return false;
         }
      });
   }else if(numberValue==5){
      $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number5.png width=20 height=20>';
            return false;
         }
      });
   }else if(numberValue==6){
      $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number6.png width=20 height=20>';
            return false;
         }
      });
   }
   var randoms1 = [...Array(1)].map(() => Math.floor(Math.random() * 6)+1);
   var randoms2 = [...Array(1)].map(() => Math.floor(Math.random() * 6)+1);
   var randoms3 = [...Array(1)].map(() => Math.floor(Math.random() * 6)+1);
   if (clicks%3==0) {
      if (randoms1==1||randoms2==1||randoms3==1) {
         $(".set1").addClass("bg-color1");
         $.each($('.rich1 td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = '<img src=img/number1.png width=50 height=50>';
               return false;
            }
         });
      }
      if (randoms1==2||randoms2==2||randoms3==2) {
        $(".set2").addClass("bg-color1");
        $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number2.png width=50 height=50>';
            return false;
         }
      });
     }
     if (randoms1==3||randoms2==3||randoms3==3) {
        $(".set3").addClass("bg-color1");
        $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number3.png width=50 height=50>';
            return false;
         }
      });
     }
     if (randoms1==4||randoms2==4||randoms3==4) {
        $(".set4").addClass("bg-color1");
        $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number4.png width=50 height=50>';
            return false;
         }
      });
     }
     if (randoms1==5||randoms2==5||randoms3==5) {
        $(".set5").addClass("bg-color1");
        $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number5.png width=50 height=50>';
            return false;
         }
      });
     }
     if (randoms1==6||randoms2==6||randoms3==6) {
        $(".set6").addClass("bg-color1");
        $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number6.png width=50 height=50>';
            return false;
         }
      });
     }

     console.log(randoms1);
     console.log(randoms2);
     console.log(randoms3);
  }
  if (clicks%4==0) {

   
    reset();
 }

});
});
</script>
<div class="f2">

   <table  class="demo1" style="background-color:#E6E6E6">
      <tbody>
         <tr>
            <td><table style="border:0px;"><tbody><tr><td width="50" colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
         </tr>

      </tbody>
   </table>
</div>
<br><br><br>


<div class="f1">
 <table >
    <tbody >
      <tr>
        <td class="one">
          <table style="border: 0px;" >
            <tbody>
              <tr >
                 <td width="50%" class="set1" style="border: 0px;">1</td>
                 <td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number1.png"></td>
              </tr>
           </tbody>

        </table>

     </td>
     <td class="two">
       <table style="border: 0px;" >
         <tbody>
           <tr  >
             <td width="50%" class="set2" style="border: 0px;">2</td>
             <td width="50%" class="set2" style="border: 0px;"><img width="50" height="50" src="img/number2.png"></td>
          </tr>
       </tbody>

    </table>

 </td>
 <td class="three">
    <table style="border: 0px;" >
      <tbody>
        <tr  >
          <td width="50%" class="set3" style="border: 0px;">3</td>
          <td width="50%" class="set3" style="border: 0px;"><img width="50" height="50" src="img/number3.png"></td>
       </tr>
    </tbody>

 </table>

</td>
<td class="four">
 <table style="border: 0px;" >
   <tbody>
     <tr  >
       <td width="50%" class="set4" style="border: 0px;">4</td>
       <td width="50%" class="set4" style="border: 0px;"><img width="50" height="50" src="img/number4.png"></td>
    </tr>
 </tbody>

</table>

</td>
<td class="five">
 <table style="border: 0px;" >
   <tbody>
     <tr  >
       <td width="50%" class="set5" style="border: 0px;">5</td>
       <td width="50%" class="set5" style="border: 0px;"><img width="50" height="50" src="img/number5.png"></td>
    </tr>
 </tbody>
</table>
</td>

<td class="six">
 <table style="border: 0px;" >
   <tbody>
     <tr  >
       <td width="50%" class="set6" style="border: 0px;">6</td>
       <td width="50%" class="set6" style="border: 0px;"><img width="50" height="50" src="img/number6.png"></td>
    </tr>
 </tbody>

</table>

</td>
</tr>
</tbody>
</table>
<br><br>

<table style="background-color:#E6E6E6;height: 50px" >
   <tr class="yes" >
      <td>ถูก</td>
      <td id="sum1">0</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></td>
   </tr>
</table>
<br><br>
<table style="background-color:#E6E6E6;height: 60px" >
   <tr class="rich1" >
      <td >ผล</td>
      <td ></td>
      <td ></td>
      <td ></td>
      
   </tr>
</table>

</div>
<p>Clicks: <a id="clicks">0</a></p>
</body>
</html>


Golff Sinlapachai 110.78.176.xxx 28-10-2019 13:18
 ความคิดเห็นที่ 3
โค้ดอยู่บรรทัดที่218ครับ


Golff Sinlapachai 110.78.176.xxx 28-10-2019 13:19
 ความคิดเห็นที่ 4
มันต้องใช้ function ไหนครับอันนี้มันเเสดงเเต่ครั้งเเรก

$.each($('.rich1 td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = '<img src=img/number1.png width=50 height=50>';
               return false;
            }
         });


Golff Sinlapachai 61.7.135.xxx 29-10-2019 13:48
 ความคิดเห็นที่ 5
ไม่รู้ว่าทำอะไร แต่ลองศึกษาา css กับ html โดยเฉพาะพวก layout div flex รวมกับ jquery น่าจะช่วนให้ประยุกต์เพิ่มเติมได้

HTML

<ul class="list-01 cl1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>


<ul class="list-01 mt-10">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul class="list-01 mt-10 tg1">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>


CSS

body {
  background: #CCCC;
  height: 100vh;
  margin: 0;
}
.mt-10{
  margin-top: 20px !important;
}
.cl1{
  cursor: pointer;
}
ul.list-01{
  display: flex;
  list-style: none;
  margin: 0;padding: 0;
}
ul.list-01 li{
  border:1px solid #666;
  list-style: none;
  margin: 0;padding: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: grey;
}
.circle{
  width: 40px;
  height: 40px;
  text-align: center;
  color: yellow;
  background-color: black;
  border-radius: 50%;
}


jQuery

$(function(){
  var a = 0;
  $(".cl1 li").click(function(){
    var num = $(this).text();
    a++;
    $.each($(".tg1 li"), function(index, item){
      if($(item).html()==""){
        var el = '<div class="circle">'+num+'</div>';
        $(item).html(el);
        return false;
      }
    });
  });
});

ตัวอย่าง DEMO

Ninenik 124.120.200.xxx 29-10-2019
1 2 3 Next






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ