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

HOME > PHP > PHP Forum > ถามนอกเรื่องจาก php คับ การเพิ่มแถวและคอลัม ด้วย jqueryคับ



 

ถามนอกเรื่องจาก php คับ การเพิ่มแถวและคอลัม ด้วย jqueryคับ

 



Topic : 039986



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



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




คือจากโค๊ดเดิมมันเพิ่มแต่แถวอะคับ

โครงสร้างตารางจากเดิม คือ
<table id="tbl-product">
<tr>
<th>#</th>
<th>product</th>
</tr>
<tr>
<td>1</td>
<td>cat</td>
</tr>
</table>
<p><input type="button" name="add-row" id="add-row" value="เพิ่มแถว" /></p>

และชุดคำสั่งเป็นแบบนี้คับ

<script type="text/javascript">
$(document).ready(function(){

$('#add-row').click(function(){

var tr = $('<tr></tr>');
var td1 = $('<td>#</td>');
var td2 = $('<td>mouse</td>');

tr.append(td1);
tr.append(td2);

$('#tbl-product').append(tr);

});


})
</script>

ของเดิมมันมี2แถว1คอลัม เมื่อกดเพิ่ม มันก้จะออก 1แถว 1 คอลัม

คือต้องการให้มันมี 2แถว5คอลัม
และเมื่อกด เพิ่ม มันก้จะออก 1แถว 5คอลัม

พอประยุกต์โคด มัน error หมดเลยคับ ใครรู้ช่วยทีคับ



Tag : - - - -






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2010-03-06 21:17:10 By : kwangz_07 View : 2078 Reply : 7
 

 

No. 1



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

สมาชิกที่ใส่เสื้อไทยครีเอท

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

มั่วนะ

1 แถวหนึ่ง คอลั่ม คลิกแล้วเป็น 2/5 ต่อไป 3/5 หรือป่าว

Code
var col_fix = 5; //col สูงสุด
$('#add-row').click(function(){

//นับคอลลั่ม
var now_col = $('table#ur_id>tbody>tr:first>td').size();
if(now_col < col_fix){// if1
var to_add_col = col_fix - now_col;

//เพิ่มเป็น 5 col
$('table#ur_id>tbody>tr').each(function(){
for(var i=0; i < to_add_col; i++){
$('<td></td>').appendTo(this);
}
});
}// if1

//เพิ่มแถว
$('<tr><td><td><td><td><td>').appendTo('table#ur_id');
});//click


มั่วนะ ไม่รู้ว่าใช้แท็กแบบ optional ใน jquery จะทำงานหรือป่าว

เอาไปลองดูเอง ไม่ได้ทดสอบ


Date : 2010-03-06 21:54:15 By : pjgunner
 


 

No. 2



โพสกระทู้ ( 1,242 )
บทความ ( 13 )

สมาชิกที่ใส่เสื้อไทยครีเอท

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

ไม่ค่อยเคลียร์คำถามเท่าไหร่ แต่ ก็ลองเอาไปประยุกต์ดูนะครับ

<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#add-row').click(function(){
			var tr = $('<tr></tr>');
			var td1 = $('<td>#</td>');
			var td2 = $('<td>mouse</td>');
			
			tr.append(td1);
			tr.append(td2);
			
			$('#tbl-product').append(tr);
		});
	});
</script>
</head>

<body>
<table id="tbl-product">
  <tr>
 	 <th>#</th>
 	 <th>product</th>
  </tr>
  <tr>
  	<td>1</td>
  	<td>cat</td>
  </tr>
</table>
<p><input type="button" name="add-row" id="add-row" value="เพิ่มแถว" /></p>
</body>
</html>

Date : 2010-03-06 21:59:21 By : DownsTream
 

 

No. 3



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



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


ขอบคุณที่ให้คำแนะนำคับ
Date : 2010-03-06 22:04:38 By : kwangz_07
 


 

No. 4



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



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


คือโค๊ดตัวนี้เลยคับที่ผมนำมาประยุกต์

<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$('#add-row').click(function(){

var tr = $('<tr></tr>');
var td1 = $('<td>#</td>');
var td2 = $('<td>mouse</td>');


tr.append(td1);
tr.append(td2);

$('#tbl-product').append(tr);

});

});
</script>
</head>
<body>
<table id="tbl-product">
<tr>
<th>#</th>
<th>product</th>
</tr>
<tr>
<td>1</td>
<td>cat</td>
</tr>
</table>
<p><input type="button" name="add-row" id="add-row" value="เพิ่มแถว" /></p>
</body>
</html>


แต่ผมจะประยุกต์ให้มันออกแบบตามภาพนี้อะคับ
มันไม่ออกอะคับ คลิกที่ปุ่มมันกลับไม่เพิ่มอะคับ
ผมนั่งแก้ยังไงก้ไม่ได้คับช่วยทีคับ

eeeee
Date : 2010-03-06 22:23:43 By : kwangz_07
 


 

No. 5



โพสกระทู้ ( 1,242 )
บทความ ( 13 )

สมาชิกที่ใส่เสื้อไทยครีเอท

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

งง จัง ทำแค่นี้ แล้วจะเอาไปทำอะไรต่อเหรอครับ

<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#add-row').click(function(){
			var tr = $('<tr></tr>');
			var td1 = $('<td>&nbsp;&nbsp;</td>');
			var td2 = $('<td>&nbsp;&nbsp;</td>');
			var td3 = $('<td>&nbsp;&nbsp;</td>');
			var td4 = $('<td>&nbsp;&nbsp;</td>');
			var td5 = $('<td>&nbsp;&nbsp;</td>');
			
			tr.append(td1);
			tr.append(td2);
			tr.append(td3);
			tr.append(td4);
			tr.append(td5);
			
			$('#tbl-product').append(tr);
		});
	});
</script>
</head>

<body>
<table id="tbl-product" border="1">
  <tr>
 	 <th> 1 </th>
 	 <th> 2 </th>
 	 <th> 3 </th>
 	 <th> 4 </th>
  	 <th> 5 </th>
  </tr>
</table>
<p><input type="button" name="add-row" id="add-row" value="เพิ่มแถว" /></p>
</body>
</html>


เอาแบบถึก ๆ ละกันครับ หุ หุ
Date : 2010-03-06 23:25:06 By : DownsTream
 


 

No. 6



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



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


Code (PHP)
<table border="1">
		<tbody class="row_add">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
		</tbody>
	</table>
	<input type="button" class="add" value="add">

Code (PHP)
$(function(){
            $('.add').click(function(){
				var tr = $('.row_add tr:last');
				var html = tr.parent().html();
				$(tr).find('td').each(function(){
					var cc = $(this).html('&nbsp;');
				});
				$(html).insertBefore('.row_add');
			});
        });


ผมลองขอเสนออีกทีทางเลือกนึง ตัวอย่างที่ให้มาใช้ได้หมดครับผม
เหตุผมที่เขียนแบบนี้ เพราะว่า

เราไม่ต้องไปกังวลว่า บางทีอาจจะเพิ่ม TD อีกซักสามสี่ตัว ใน html หรือ บางที td มันเยอะมาก เราอาจจะต้องมานั่งเพิ่ม td ใน javascript ในจังหวะที่เราจะ append เพิ่มตามไปด้วย ผมเลยใช้ javascript เพื่อให้มันหา td มาเลยครับว่า มีกี่ตัว แล้ว เอาไอ้ตัวที่ หาได้อะครับ มา ใส่ โดยให้เอาจาก tr ตัวสุดท้ายมาทำ โดย เราไม่รู้ว่า tr ตัวสุดท้ายนั้น ใน td มี ค่าอะไรหรือเปล่า ก็เลยมันใส่ &nbsp; ให้ซะเลย

อาจจะดูยาก ๆ ไปหน่อย เหมือนจะวุ่ยวาย ฮ่า
Date : 2010-03-09 01:31:37 By : LindyFralin
 


 

No. 7



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



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


ไปโหลด jquery มาก่อนนะครับ ถ้ามีแล้วก็ลิงค์ไปให้ถูก
<html>
<head>
<script src="./jquery.js"></script>

<script type="text/javascript">
jQuery().ready(function() {

jQuery("#BTTaddimg").click(function () {
jQuery("<br /><input type='file' name='name' id='name' class='DropDown' />").insertBefore("#addImageSlotArea");
});

});
</script></head>

<body>
<input type="file" name="name" id="name" class="DropDown" />
<!--for contain image browse slot-->
<p id="addImageSlotArea"></p>
<input name="BTTaddimg" type="button" id="BTTaddimg" class="list_menu" value="Add Image Slot" />

</body>
</html>
Date : 2010-03-13 00:32:51 By : jackiller
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ถามนอกเรื่องจาก php คับ การเพิ่มแถวและคอลัม ด้วย jqueryคับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่