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

HOME > PHP > PHP Forum > อยากจะเพิ่มลูกเล่นให้กับ ajax อัพเดทข้อมูลช่วยเข้ามาตอบหน่อยครับ



 

อยากจะเพิ่มลูกเล่นให้กับ ajax อัพเดทข้อมูลช่วยเข้ามาตอบหน่อยครับ

 



Topic : 107355



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



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




เกี่ยวกับ ajax ครับ คือผมอยากทำให้เวลาช่อง id ข้อมูลมีการอัพเดทเเล้วพื้นหลังเปลี่ยนเป็นสีเเดง 1 วิเเล้วกลับมาเป็นสีเดิม นี่ต้องเขียนยังไงหรอครับ
แค่ช่อง id นะครับ ถ้าช่องอื่นมีการอัพเดทก็ให้มันเป็นปกติไม่ต้องเปลี่ยนสี
http://warz.in/ajax/



Tag : PHP, MySQL, HTML/CSS, JavaScript, CakePHP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-03-30 16:38:59 By : aibot View : 905 Reply : 14
 

 

No. 1



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



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


Code
<script src="jquery.min.js"></script> <script> $("#id").animate({ 'background-color' : 'red' สีที่ต้องการให้เปลี่ยน },1000, function(){ 'background-color' : 'white' //สีเดิม }); </script>


ปล.ผมไม่ได้ทดลองก่อน โพสนะครับ อาจจะเขียนตกหล่น ขออภัย








ประวัติการแก้ไข
2014-03-30 21:56:24
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-30 21:55:45 By : yamcrocodile
 


 

No. 2



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



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


ยังไม่ได้เลยครับช่วยหน่อยนะครับ - -.


Code (PHP)
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.js"></script>
<script>
$("#id").animate({
  'background-color' : 'red' สีที่ต้องการให้เปลี่ยน
},1000, function(){
  'background-color' : 'white' //สีเดิม
});
</script>
</head>
<body>
	<table style="border:1px solid gray">
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Phone</th>
			</tr>
		</thead>
		<tbody>
			<tr id="row0">
				<td class="id"></td>
				<td class="name"></td>
				<td class="phone"></td>
			</tr>
			<tr id="row1">
				<td class="id"></td>
				<td class="name"></td>
				<td class="phone"></td>
			</tr>
		</tbody>
	</table>
	<script>
	refresh();
	function refresh (){
		$.post('result.php', function(data) {
			$.each(data, function(row, obj) {
				$.each(obj, function(key, value) {
					if($("#row"+row+" ."+key).html()!=value)
						$("#row"+row+" ."+key).html(value);
					// console.log(value);
				});
			});
			setTimeout(refresh,1000);
		}, "json");
	}
	</script>
</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-30 22:48:21 By : aibot
 

 

No. 3



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



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


กรำ ไม่เอาไปใส่ ใน each ละครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-30 22:52:12 By : yamcrocodile
 


 

No. 4



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



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


ใส่ยังไงหรอครับทำให้ดูหน่อยสิครับ ไม่รู้จริงๆ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-30 23:05:10 By : aibot
 


 

No. 5



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



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


pยังไม่ได้เลยครับตอบหน่อยเถอะครับผมอยากทำได้จริงๆ

Code (PHP)
	<script>
	refresh();
	function refresh (){
		$.post('result.php', function(data) {
			$.each(data, function(row, obj) {
				$.each(obj, function(key, value) {
$("#id").animate({
  'background-color' : 'red'
},1000, function(){
  'background-color' : 'white'
});
					if($("#row"+row+" ."+key).html()!=value)
						$("#row"+row+" ."+key).html(value);
					// console.log(value);
				});
			});
			setTimeout(refresh,1000);
		}, "json");
	}
	</script>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-30 23:21:00 By : aibot
 


 

No. 6



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



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


อย่าลืม download
jquery กับ jquery ui มาด้วยนะครับ

index.php
Code
<html> <head> <title>test</title> <meta charset="utf-8"> </head> <body> <table id="add" border="1" cellpadding="5"> <thead> <tr> <th>ID</th> </tr> </thead> <tbody> </tbody> </table> <script src="jquery.js"></script> <script src="js/jquery-ui-1.10.4.custom.js"></script> <script> $(function(){ $.ajax({ url: "data.php", type: "post", dataType: "json", success: function(data){ $.each(data, function(k, v){ setTimeout(function(){ $("table#add").append("<tr id=" +k+ "><td>" + data[k] + "</td></tr>") $("#"+k).animate({ backgroundColor:"red" },200, function(){ $(this).animate({ backgroundColor:"white" }) }) },k*1000) }) } }) }) </script> </body> </html>


data.php
Code
<?php $r = array(); for($i=0; $i<=100; $i++){ $r[] = $i; } echo json_encode($r); ?>


ลองไปดัดแปลงดูนะครับ


ประวัติการแก้ไข
2014-03-30 23:38:27
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-30 23:37:21 By : yamcrocodile
 


 

No. 7



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



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


กำผมไม่รู้วิธีเอาไปลงโค๊ดผมหน่ะสิครับผมไม่เคยทำ ajax
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-30 23:57:49 By : aibot
 


 

No. 8



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



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


งั้นผมขอ code หน้า result.php ด้วยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-30 23:59:08 By : yamcrocodile
 


 

No. 9



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



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


<?php
$result = array(
array(
"id" => "sdd88"
,"name" => chr(rand(10,100))
,"phone" => rand(10,100)
),
array(
"id" => "C02"
,"name" => chr(rand(10,100))
,"phone" => rand(10,100)
)
);
echo json_encode($result);
?>
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-31 00:00:46 By : aibot
 


 

No. 10



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



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


กำ ไปเเล้วหรอครับ ?
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-31 00:23:42 By : aibot
 


 

No. 11



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



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


ผมกำลังไป test code มาให้รอซักครู่ นะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-31 00:33:00 By : yamcrocodile
 


 

No. 12



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



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


index.php
Code
<html> <head> <title>test</title> <meta charset="utf-8"> </head> <body> <table id="add" border="1" cellpadding="5"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Phone</th> </tr> </thead> <tbody> </tbody> </table> <script src="jquery.js"></script> <script src="js/jquery-ui-1.10.4.custom.js"></script> <script> $(function(){ $.ajax({ url: "data.php", type: "post", dataType: "json", success: function(data){ $.each(data, function(k,v){ setTimeout(function(){ var addTr = "<tr id=add"+k+">"; addTr += "<td>"+v.id+"</td>" addTr += "<td>"+v.name+"</td>"; addTr += "<td>"+v.phone+"</td>"; addTr += "</tr>"; $("table#add tbody").append(addTr) $("#add"+k).animate({ backgroundColor : "red" },200, function(){ $(this).animate({ backgroundColor : "white" }); }); },k*1000) }) } }) }) </script> </body> </html>


data.php
Code
<?php $result = array( array("id" => "sdd88", "name" => chr(rand(10,100)), "phone" => rand(10,100)), array("id" => "C02", "name" => chr(rand(10,100)), "phone" => rand(10,100)) ); echo json_encode($result); ?>


อย่าลืม download ที่ผม ทำสีแดงไว้ด้วยนะครับ jquery ui สามารถ download ได้ที่
http://jqueryui.com/download/
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-31 00:35:08 By : yamcrocodile
 


 

No. 13



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



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


ขอบคุณครับ
ผมว่ายังแปลๆอยู่ครับอันเดิมมันอัพเดทเรื่อย ๆ แต่ไม่เป็นไรครับขอบคุณครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-31 00:42:42 By : aibot
 


 

No. 14



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



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


ถ้าอยากให้อัพเดท เรื่อยๆ ก็ลองแบบนี้ดูครับ ตามตัวหนังสือสีแดง

Code
setInterval(function(){ $.ajax({ url: "data.php", type: "post", dataType: "json", success: function(data){ $.each(data, function(k,v){ setTimeout(function(){ var addTr = "<tr id=add"+k+">"; addTr += "<td>"+v.id+"</td>" addTr += "<td>"+v.name+"</td>"; addTr += "<td>"+v.phone+"</td>"; addTr += "</tr>"; $("table#add tbody").html(addTr) $("#add"+k).animate({ backgroundColor : "red" },200, function(){ $(this).animate({ backgroundColor : "white" }); }); },k*1000) }) } }) },1000)


เปลี่ยน append ให้เป็น html
ถ้าต้อง การ อธิบายเพิ่มเติม ID LINE : yamq


ประวัติการแก้ไข
2014-03-31 01:04:44
2014-03-31 01:05:52
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-03-31 01:02:58 By : yamcrocodile
 

   

ค้นหาข้อมูล


   
 

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