เปลี่ยนรูปภาพโดยใช้ javascript มันเปลี่ยนแค่อันแรกอันเดียว อยากให้เปลี่ยนได้ทุกแถว

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

เปลี่ยนรูปภาพโดยใช้ javascript มันเปลี่ยนแค่อันแรกอันเดียว อยากให้เปลี่ยนได้ทุกแถว
<script language='javascript' type='text/javascript'>
   function show_pic(id_name){     
     if(id_name=='img1' ){
         document.getElementById('img1').style.display = 'none';
         document.getElementById('img2').style.display = 'inline';
     }else{
         document.getElementById('img1').style.display = 'inline';
         document.getElementById('img2').style.display = 'none';
     } 
   }
</script>

     <center><form method="get" action="monkdetail.php" id="formsearch">
               <input type="text" name="txtdate" id="txtdate" required="" readonly="readonly" value="เลือกวันที่" />
              <input type="submit" class="button" value="ค้นหา">
      </form><center>
 <?
  include("connectdb.php");
  if($_REQUEST["txtdate"] =="")
  {
       $strSQL = "select m.monkname as monk,e.* from Event e join Monk m on e.monkid = m.monkid where m.monkname <> 'ไม่ระบุ'";
  }else{
       $datestart = mysql_real_escape_string($_GET['txtdate']);
       $date = date("Y-m-d", strtotime(str_replace('/', '-',$datestart)));
       $strSQL = "select m.monkname as monk,e.* from Event e join Monk m on e.monkid = m.monkid  where e_startdate LIKE '$date' and m.monkname <> 'ไม่ระบุ'";
  }
    $objQuery = mysql_query($strSQL);
    $Num_Rows = mysql_num_rows($objQuery);
    $Per_Page = 10;   // Per Page
    $Page = $_GET["Page"];
    if(!$_GET["Page"])
    {
      $Page=1;
    }
      $Prev_Page = $Page-1;
      $Next_Page = $Page+1;
      $Page_Start = (($Per_Page*$Page)-$Per_Page);
    if($Num_Rows<=$Per_Page)
    {
      $Num_Pages =1;
    }
    else if(($Num_Rows % $Per_Page)==0)
    {
      $Num_Pages =($Num_Rows/$Per_Page) ;
    }
    else
    {
      $Num_Pages =($Num_Rows/$Per_Page)+1;
      $Num_Pages = (int)$Num_Pages;
    }
      $strSQL .=" order  by monkid ASC LIMIT $Page_Start , $Per_Page";
      $objQuery  = mysql_query($strSQL);
?>
<center><table border="0" class="rwd-table">
    <tr>
      <th>รายชื่อพระสงฆ์ที่ต้องการเป็นพิเศษ</th>
      <th>วันเริ่มต้น</th>
      <th>วันที่สุด</th>
      <th>เวลาเริ่มต้น</th>
      <th>เวลาสิ้นสุด</th>
      <th>ชื่องาน</th>
      <th>สถานะ</th>
    </tr>
    <?   
     while($objResult = mysql_fetch_array($objQuery))
     {
      $i++;
    ?>
    <tr>
        <td data-th="พระสงฆ์ที่ต้องการนิมนต์เป็นพิเศษ"><?php echo $objResult["monk"];?></td>
        <td data-th="วันเริ่มงาน"><?php echo date('d/m/Y', strtotime($objResult["e_startdate"]));?></td>
        <td data-th="วันเริ่มงาน"><?php echo date('d/m/Y', strtotime($objResult["e_enddate"]));?></td>
        <td data-th="เวลาเริ่มสุดงาน"><?php echo $objResult["e_starttime"];?></td>
        <td data-th="เวลาสิ้นสุดงาน"><?php echo $objResult["e_endtime"];?></td>
        <td data-th="ชื่องาน"><?php echo $objResult["e_name"];?></td>
        <td data-th="สถานะ"><img src='images/icon/wait.png' id='img1' width="20px" height="20px" style='display:inline;' onclick="show_pic('img1');" /><img src='images/correct.png' id='img2' width="20px" height="20px" style='display:none;' onclick="show_pic('img2');" />
      </td>
      <?php
       }
      ?>
  </tr>
  </table>


Catmini59 15-11-2016 12:18:05

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

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


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


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
การกำหนด id ค่าจะต้องไม่ซ้ำกัน ถ้าในลูป ต้องมีการเพิ่มหรือต่อค่าาเข้าไป เช่น

    <img src='images/icon/wait.png' id='img<?=$i?>' width="20px" height="20px" style='display:inline;' onclick="show_pic('img<?=$i?>');" />


หรือดูโค้ดนี้เป็นแนวทาง

<script  type='text/javascript'>
function show_pic(obj,id_name){     
	var obj2 = document.getElementById(id_name);
	obj.style.display = 'none';
	obj2.style.display = 'inline';
}
</script>
<?php
for($i=1;$i<5;$i++){
?>    
<div>
<img src="images/book_fail.gif" id="fail_img<?=$i?>"  onClick="show_pic(this,'success_img<?=$i?>')" style="display:inline;" />
<img src="images/book_success.gif" id="success_img<?=$i?>" onClick="show_pic(this,'fail_img<?=$i?>')"  style="display:none;"/>
</div>
<?php } ?>    


ตัวอย่าง

กกก



ninenik 15-11-2016






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