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 > ขอสอบถาม jquery slidetoggle หน่อยครับ มันน่าจะง่าย แต่ผมไม่เก่ง - -"



 

ขอสอบถาม jquery slidetoggle หน่อยครับ มันน่าจะง่าย แต่ผมไม่เก่ง - -"

 



Topic : 111846



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



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




จากรูป มีทั้งหมด 3 รูป ขอพูดเป็น บน กลาง ล่าง นะครับ
คิวรี่ ข้อมูลจาก mysql ธรรมดา มีปุ่ม รายละเอียด เมื่อคลิกให้สไลด์รายละเอียดลงมา ดังรูปกลางครับ
ปัญหาคือ
1. ปุ่มรายละเอียด คลิกได้แค่ ปุ่มบนสุดครับ ปุ่มอื่นไม่เป็นผลเลย
2. เมื่อสไลด์ลงมาแล้ว สไลด์เก็บ ตารางมันค้างอ่ะครับ ดังรูปล่างสุด
ขอสอบถามหน่อยนะครับ ไม่น่ายาก แต่ผมไม่เป็น T_T

asdfadsf

Code (PHP)
<script type="text/javascript">
$(document).ready(function() {
    $("#btn_detail").click(function(){
		$("#tr_inc").show();
		$("#panel").slideToggle("slow");
	});
});
</script>
<style>
#panel {
	border:solid 1px #FF0000;
	
	padding:5px;
	display:none;
}

#tr_inc {
	display:none;
}
</style>

<table >
  <tr>
    <th width="11%" >รหัสนักศึกษา</th>
    <th width="27%" >ชื่อ-สกุล</th>
    <th width="35%" >สาขาวิชา</th>
    <th width="17%" >อนุมัติ</th>
    <th width="10%" >รายละเอียด</th>
  </tr>
  <?php //{ sql query ?>
     <tr>
    <td ><div align="center"><?=$result["number"];?></div></td>
    <td ><?=$result["namesurname"];?></td>
    <td ><?=$result["subject"];?></td>
    <td ><div align="center"><label><input type="radio" name="RadioGroup1" value="1" id="RadioGroup1_0"> อนุมัติ</label><label><input type="radio" name="RadioGroup1" value="0" id="RadioGroup1_1"> ไม่อนุมัติ</label></div>
	</td>
    <td >
    <div align="center"><input name="btn_detail" id="btn_detail" type="button" value="รายละเอียด"></div>
    </td>
  </tr>
  <tr id="tr_inc"><td colspan="5">
     <div id="panel">test</div>
  </td></tr>
  <?php //sql query } ?>
</table>


ผมเขียนมาประมาณนี้มันไม่ได้ตามต้องการ ต้องปรับแก้ตรงไหน สอบถามหน่อยครับ ขอบคุณครับ



Tag : PHP, MySQL, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-10-10 11:43:18 By : angelkiller9 View : 833 Reply : 8
 

 

No. 1



โพสกระทู้ ( 9,542 )
บทความ ( 2 )



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


ลองเปลี่ยน id เป้น class ครับ id ควรจะเป็น unique ไม่ควรซ้ำกันครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-10 12:24:42 By : Chaidhanan
 


 

No. 2



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



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


เติม tr หน้าชื่อ tr #... เปลี่ยน code เพิ่ม tbody ในส่วนของ table body codeที่จะให้โชว เปลี่ยนเป็น $(this).parentsUntil('tbody').eq($(this).parentsUntil('tbody').index()+1).show() เล่นมือถือนะไม่ได้ลอง ถ้าไม่ได้เดี๋ยวแก้ให้ใหม่ครับ


ประวัติการแก้ไข
2014-10-10 12:37:12
2014-10-10 12:38:27
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-10 12:36:28 By : gaowteen
 

 

No. 3



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



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


ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2014-10-10 12:24:42
รายละเอียดของการตอบ ::
เปลี่ยนเป็น class แล้ว กดได้ทุกปุ่ม แต่มันไปสไลด์ เฉพาะช่องบน อ่ะครับ ไม่ได้สไลด์ลงมาตรงใต้ record ปุ่มที่เรากด


ตอบความคิดเห็นที่ : 2 เขียนโดย : gaowteen เมื่อวันที่ 2014-10-10 12:36:28
รายละเอียดของการตอบ ::
อันนี้ลองแล้วยังไม่ได้อ่ะครับ ผลเหมือนเดิม

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-10 12:46:43 By : angelkiller9
 


 

No. 4



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



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


ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2014-10-10 12:24:42
รายละเอียดของการตอบ ::
แต่ถ้าเปลี่ยน ทั้ง ปุ่ม ทั้ง ตาราง และ panel เป็น คลาส แล้ว ไม่ว่ากดปุ่มไหน สไลด์ลงมาทุก record เรยครับ เงิบ 555+

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-10 12:49:24 By : angelkiller9
 


 

No. 5



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



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


Code (PHP)
<script type="text/javascript">
$(document).ready(function() {
			$("tr #btn_detail").click(function(){
		console.log($(this).parentsUntil('tbody').next());
		$(this).parentsUntil('tbody').next().slideToggle();
		$(this).parentsUntil('tbody').next().find('#panel').slideToggle("slow");
	});
});
</script>
<style>
#panel {
	border:solid 1px #FF0000;
	padding:5px;
	display:none;
}

#tr_inc {
border:1px solid;
	display:none;
}
</style>

<table >
<thead>
  <tr>
    <th width="11%" >รหัสนักศึกษา</th>
    <th width="27%" >ชื่อ-สกุล</th>
    <th width="35%" >สาขาวิชา</th>
    <th width="17%" >อนุมัติ</th>
    <th width="10%" >รายละเอียด</th>
  </tr>
  </thead>
  <tbody>
  <?php 
  for($i=0;$i<10;$i++){
  ?>
     <tr>
    <td ><div align="center"></div></td>
    <td ></td>
    <td ></td>
    <td ><div align="center"><label><input type="radio" name="RadioGroup1" value="1" id="RadioGroup1_0"> อนุมัติ</label><label><input type="radio" name="RadioGroup1" value="0" id="RadioGroup1_1"> ไม่อนุมัติ</label></div>
	</td>
    <td >
    <div align="center"><input name="btn_detail" id="btn_detail" type="button" value="รายละเอียด"></div>
    </td>
  </tr>
  <tr id="tr_inc"><td colspan="5">
     <div id="panel">test</div>
  </td></tr>
  <?php 
  }
  ?>
  </tbody>
</table>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-10 13:27:58 By : gaowteen
 


 

No. 6



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



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


ถ้าจะเขียนง่าย เวลา while ให้+i ต่อ หลังชื่อ แล้ว เอา onclick="show(id+i)" ไปใส่ที่ปุ่ม แบบนี้ง่ายครับ
แต่แบบที่นายเขียน มัน id เดียวกันมันต้องหาให้เจอว่ากดอันไหน จะให้ โชว์อันไหน แบบนี้แล้วแต่ความถนัดของคนเขียนละครับว่าจะเขียนยังไง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-10 13:39:39 By : gaowteen
 


 

No. 7



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



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


ตอบความคิดเห็นที่ : 6 เขียนโดย : gaowteen เมื่อวันที่ 2014-10-10 13:39:39
รายละเอียดของการตอบ ::
อ่อ เข้าใจละครับ ขอบคุณครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-10 13:40:45 By : angelkiller9
 


 

No. 8



โพสกระทู้ ( 9,542 )
บทความ ( 2 )



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


อันนี้ตัวอย่าง เอาเป็นว่าใช้คลาสทั้งหมด
จะต้อง tag ที่เป็น ต้นตอ ใช้คำสั่ง parent
Code (PHP)
$(document).ready(function() {
	$(".btn_detail").click(function(){
		var tr = $(this).parent().parent(); // ใช้ parent 2 ชั้น อันแรก เป็น td อันที่ 2 ก็จะได้ tr
		var idx = $(tr).index()+1; หา index ของ tr  และ +1 เพื่อ tr อันต่อไป ที่ เก็บข้อมูลสำหรับโชว์
		var tb = $(tr).parent(); // หา tb
		$(tb).children(idx).find('.tr_inc').slideTogle('slow'); // ทำอันเดียวก็ได้มั้งครับ panal ไม่ต้อง display: none       
		//$(tb).children(idx).find('.panel').slideTogle("slow");       
	});
});


สำหรับการใช้ id ก็ตาม คุณ bird ว่านั่นแหล่ะครับ
เสริมอีกนิด เอา primary key ของตารางมาใช้เป็น id เวลา เซฟ หรือ ลบ ก็อ้าง
id ของตารางได้เลย ไม่ต้องมาหาอีก
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-10 17:39:13 By : Chaidhanan
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ขอสอบถาม jquery slidetoggle หน่อยครับ มันน่าจะง่าย แต่ผมไม่เก่ง - -"
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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 02
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 อัตราราคา คลิกที่นี่