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 > ขอความช่วยเหลือ ต้องเขียนscript อย่างไรทำให้สี background ของแถว เปลี่ยนตาม value ="2" และ "3" จากข้อมูลที่ดึงจาก database แบบวนลูปมา ครับ



 

ขอความช่วยเหลือ ต้องเขียนscript อย่างไรทำให้สี background ของแถว เปลี่ยนตาม value ="2" และ "3" จากข้อมูลที่ดึงจาก database แบบวนลูปมา ครับ

 



Topic : 123058



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



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




รูปที่แสดงรายงาน

Code (JavaScript)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- DataTables CSS -->

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#gridview tbody tr:odd").addClass("odd");
 $("#gridview tbody tr:even").addClass("even");
 $("#gridview thead tr").addClass("head");
 $(document).ready(function() { 
 $("#gridview tr.odd").mouseover(function(e) {
 $(this).removeClass("odd").addClass("over");
 }).mouseout(function(e) {
 $(this).removeClass("over").addClass("odd");
 }); 
 $("#gridview tr.even").mouseover(function(e) {
 $(this).removeClass("even").addClass("over");
 }).mouseout(function(e) {
 $(this).removeClass("over").addClass("even");
 });
 });
 });
 </script>

<style type="text/css"> 


 table#gridview {
 clear:both;
 }
 table#gridview td {
 padding:3px 0px;
 }
 table#gridview tr.head {
 background:#B18904;
font-family:Arial, Helvetica, sans-serif;
 text-align:center;
 }
 table#gridview tr.head td {
 padding:3px 0px;
 }
 table#gridview tr.odd {
 background:#F8F8F8;
 }
 table#gridview tr.even {
 background:#FFFF;
 }
 table#gridview tr.over {
 background:#FFFFCC ;
 }
 
.bb2 {
	font-size: 14px;
	
}
text-indent:0.5in; 
 #gridviewsss {
	color: #FFF;
}

body {
	background-color: #D3D3D3;
}
body,td,th {
	color: #333;
}
</style>



<body>
<?php

$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("ots_data");

$strSQL = "SELECT * FROM customer";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$Num_Rows = mysql_num_rows($objQuery);
$strSQL .=" order by id desc ";
$objQuery  = mysql_query($strSQL);
?>

<table  class="display" width="1141" height="135"  border="0" align="center" cellpadding="1" cellspacing="1" id="gridview">

 <thead> <tr bgcolor="#B18904" style="font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: 14px; color: #FFF">
    <th width="50" height="44" > ID </th>
    <th width="178" >Reservation Date</th>
    <th width="203"> Guest Name</th>
    <th width="260"> Destination</th>
    <th width="121"> Amount</th>
    <th width="39">Level</th>
    <th width="268">Remark</th>
  </tr>
  </thead>
  
<?php
while($objResult = mysql_fetch_array($objQuery))
{
?>
   <tr align="center" bgcolor="#FFFFFF" style="font-family:Arial, Helvetica, sans-serif; font-style:normal;font-weight:normal; font-size:13px;color:black">
    <td height="42"><div align="center">
	<?php echo $objResult["id"];?></div></td>
    
    <td><?php echo $objResult["reservation_date"];?> </td>
    <td><?php echo $objResult["destination"];?></td>
    <td><?php echo $objResult["guest_name"];?></td>
    <td><?php echo $objResult["amount"];?></td>
    <td><?php echo $objResult["level"];?></td>
    <td><?php echo $objResult["remark"];?></td>
  </tr>
  
 
 <?
}
?>
  <tr bgcolor="#FFFFCC" id="gridviewsss" style="font-family: Arial, Helvetica, sans-serif;  font-size: 13px; color: black">
     <td colspan="5" bgcolor="#D6D6D6" >&nbsp;</td>
     <td colspan="2" align="center" ><span class="red">TOTAL RECORD : <?php echo $Num_Rows;?></span></td>
  </tr>
</table>
<?php
mysql_close($objConnect);
?>

</body>
</html>
<script>
$(document).ready(function() {
   $('gridview').DataTable();
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">




Tag : PHP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2016-05-24 08:20:26 By : panya@ots View : 1736 Reply : 9
 

 

No. 1



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



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


ใช้ CSS มาจัดการก็ได้นิ

Code (PHP)
<style>
thead > tr{background:#B18904;}
th, td{font-family:font-family:Arial, Helvetica, sans-serif}
thead th{color:#fff;font-size:14px;}
tr{height:44px;}
tbody > tr:nth-child(even) {background: #ccc}
tbody > tr:nth-child(odd) {background: #fff}
tbody > tr:hover{background:#eee}
tr.tr2{background:blue !important}
tr.tr3{background:green !important}
tbody td{font-size:13px;color:#000}
</style>
<?php
while($objResult = mysql_fetch_array($objQuery)) {//แนะนำใช้ mysql_fetch_assoc เพราะ performance จะดีกว่า
	$tr_class = '';
	if ($objResult['level'] == 2 OR $objResult['level'] == 3)
	{
		$tr_class = ' class="tr'.$objResult['level'].'"';
	}
	echo '<tr'.$tr_class.'>';
	/*
	ที่เหลือลุยต่อ
	*/
	echo '</tr>';
}
?>


ยังไม่ได้ลองนะ

dataTable ใส่ selector ผิดนะ

Code (PHP)
$('#gridview').DataTable();









ประวัติการแก้ไข
2016-05-24 10:11:44
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-24 10:10:52 By : fossil31
 


 

No. 2



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



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


ตอบความคิดเห็นที่ : 1 เขียนโดย : fossil31 เมื่อวันที่ 2016-05-24 10:10:52
รายละเอียดของการตอบ ::
...ขอบคุณครับ แต่มันยังไม่ได้ครับ เป็นแค่สี เทา สลับ ขาว เท่านั้นครับ highlight ที่อยากให้,uเมื่อข้อมูลใน field level =2 or =3 ไม่มาครับ



ประวัติการแก้ไข
2016-05-24 20:20:29
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-24 20:14:34 By : panya@ots
 

 

No. 3



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



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


ก็ได้นะ

Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 

 table#gridview {
 clear:both;
 }
 table#gridview td {
 padding:3px 0px;
 }
 table#gridview tr.head {
 background:#B18904;
font-family:Arial, Helvetica, sans-serif;
 text-align:center;
 }
 table#gridview tr.head td {
 padding:3px 0px;
 }
.bb2 {
	font-size: 14px;
}
text-indent:0.5in; 
 #gridviewsss {
	color: #FFF;
}
body {
	background-color: #D3D3D3;
}
body,td,th {
	color: #333;
}
thead > tr{background:#B18904;}
th, td{font-family:font-family:Arial, Helvetica, sans-serif}
thead th{color:#fff;font-size:14px;}
tr{height:44px;}
tbody > tr:nth-child(even) {background: #f3f3f3}
tbody > tr:nth-child(odd) {background: #fff}
tr.tr2{background:#00ccff !important}
tr.tr3{background:#ff6699 !important}
tbody > tr:hover, tr.tr2:hover, tr.tr3:hover{background:#ff9900 !important}
tbody td{font-size:13px;color:#000}
</style>
<body>
<?php

$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("ots_data");

$strSQL = "SELECT * FROM customer";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$Num_Rows = mysql_num_rows($objQuery);
$strSQL .=" order by id desc ";
$objQuery  = mysql_query($strSQL);
?>

<table  class="display" width="1141" height="135"  border="0" align="center" cellpadding="1" cellspacing="1" id="gridview">

 <thead> <tr>
    <th width="50"> ID </th>
    <th width="178" >Reservation Date</th>
    <th width="203"> Guest Name</th>
    <th width="260"> Destination</th>
    <th width="121"> Amount</th>
    <th width="39">Level</th>
    <th width="268">Remark</th>
  </tr>
  </thead>
  
<?php
while($objResult = mysql_fetch_array($objQuery))
{
	$tr_class = '';
	if ($objResult['level'] == 2 OR $objResult['level'] == 3)
	{
		$tr_class = ' class="tr'.$objResult['level'].'"';
	}
	echo '<tr'.$tr_class.'>';
?>
    <td height="42"><div align="center">
    <?php echo $objResult["id"];?></div></td>
    <td><?php echo $objResult["reservation_date"];?> </td>
    <td><?php echo $objResult["destination"];?></td>
    <td><?php echo $objResult["guest_name"];?></td>
    <td><?php echo $objResult["amount"];?></td>
    <td><?php echo $objResult["level"];?></td>
    <td><?php echo $objResult["remark"];?></td>
  </tr>
<?php
}
mysql_close($objConnect);
?>
</body>
</html>


array_odd_even


ประวัติการแก้ไข
2016-05-25 10:54:03
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-25 10:33:03 By : fossil31
 


 

No. 4



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



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


ตอบความคิดเห็นที่ : 3 เขียนโดย : fossil31 เมื่อวันที่ 2016-05-25 10:33:03
รายละเอียดของการตอบ ::
ได้แล้วครับ ขอบคุณมาก..มากเลยครับ


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-25 18:21:36 By : panya@ots
 


 

No. 5



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



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


ตอบความคิดเห็นที่ : 4 เขียนโดย : panya@ots เมื่อวันที่ 2016-05-25 18:21:36
รายละเอียดของการตอบ ::
รบกวน คุณ fossil ช่วยดูให้หน่อยครับ พอเอา CSS ลักษณะนี้ไปใช้กับ file ที่ใหญ่ มีหลาย table มันไม่ highlight ครับ


summary


ประวัติการแก้ไข
2016-05-25 23:03:18
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-25 22:42:08 By : panya@ots
 


 

No. 6



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



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


table มี class ไหมครับ ถ้ามีเอา class มาอ้างอิงใน css ด้วย เป็นการกำหนดการใช้เฉพาะส่วน

เช่น
<table class="myclass">


ส่วนการกำหนด css
Code (JavaScript)
<style>
.myclass.tr:nth-child(event){ .... }
.myclass.tr:nth-child(od){ .... }
.myclass.tr.hilight1{ .... }
.myclass.tr.hilight2{ .... }
</style>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-26 07:22:33 By : Chaidhanan
 


 

No. 7



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



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


ตอบความคิดเห็นที่ : 6 เขียนโดย : Chaidhanan เมื่อวันที่ 2016-05-26 07:22:33
รายละเอียดของการตอบ ::
quote-no=6]ตอบความคิดเห็นที่ : 6 เขียนโดย : Chaidhanan เมื่อวันที่ 2016-05-26 07:22:33

รายละเอียดของการตอบ ::
เรียนคุณ...chaidhanan เริ่มที่เดียวผม นำเอา script ที่คุณ..chaidhanan เคยPOST ไว้มาใช้ กำหนดแถว เมาส์ cover ใช้ได้ทุกอย่างดีมากเลยครับ แต่ผมต้องการเพิ่มให้มี highlight ในรายการที่สำคัญ ใช้ต่าใน level field = 1 เป็นตัวกำหนด อยากให้ใช้ javascript กำหนดสั่งให้ทำงานได้ไหมครับ ขอบคุณมากครับ

ข้างล่างนี้คือ file ที่ผมสร้างไว้ โดยใช้ script และ CSS ที่..chaidhanan เคยpost มาทำ ขอความกรุณาช่วยดูและเพิ่มเติมให้มี Highlight หน่อยครับ ผมเพิ่งหัดเขียนโดยศีกษาจาก google เลยหา ตัวอย่าง ยากมากครับ


ประวัติการแก้ไข
2016-05-26 09:30:40
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-26 08:55:13 By : panya@ots
 


 

No. 8



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



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


เอา code language ครอบ ด้วยครับ แบบนี้อ่านไม่รู้เรื่องครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-26 10:54:53 By : Chaidhanan
 


 

No. 9



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



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


ตอบความคิดเห็นที่ : 8 เขียนโดย : Chaidhanan เมื่อวันที่ 2016-05-26 10:54:53
รายละเอียดของการตอบ ::
คือ อยากเพิ่ม Script และcss ให้มี highlight แถวที่มีค่า field (จากตารางที่กำหนดไว้ = 2 ) ครับ

Code (JavaScript)
<script type="text/javascript">
$(document).ready(function() {
 $("#gridview tbody tr:odd").addClass("odd");
 $("#gridview tbody tr:even").addClass("even");
 $("#gridview thead tr").addClass("head");
 $(document).ready(function() { 
 $("#gridview tr.odd").mouseover(function(e) {
 $(this).removeClass("odd").addClass("over");
 }).mouseout(function(e) {
 $(this).removeClass("over").addClass("odd");
 }); 
 $("#gridview tr.even").mouseover(function(e) {
 $(this).removeClass("even").addClass("over");
 }).mouseout(function(e) {
 $(this).removeClass("over").addClass("even");
 });
 });
 });
 </script>

<style type="text/css"> 


 table#gridview {
 clear:both;
 }
 table#gridview td {
 padding:3px 0px;
 }
 table#gridview tr.head {
 background:#B18904;
font-family:Arial, Helvetica, sans-serif;
 text-align:center;
 }
 table#gridview tr.head td {
 padding:3px 0px;
 }
 table#gridview tr.odd {
 background:#F8F8F8;
 }
 table#gridview tr.even {
 background:#FFFF;
 }
 table#gridview tr.over {
 background:#FFFFCC ;
 }
 
.bb2 {
	font-size: 14px;
	
}
text-indent:0.5in; 
 #gridviewsss {
	color: #FFF;
}

body {
	background-color: #D3D3D3;
}
body,td,th {
	color: #333;
}
</style>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-26 15:11:16 By : panya@ots
 

   

ค้นหาข้อมูล


   
 

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