javascript เพิ่มและลบ element html แบบเรียงลำดับอัตโนมัติ

พูดคุย แลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework Jquery

Moderator: mindphp

คนทั่วไป

javascript เพิ่มและลบ element html แบบเรียงลำดับอัตโนมัติ

Post by คนทั่วไป »

สวัสดีครับ รบกวนถามหน่อยนะครับ
คือว่าจากโค๊ด เขียนให้มัน เพิ่ม-ลบ Element ครับ

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;

$('#addScnt').live('click', function() { //ฟังชั่นเพิ่ม Element
$('<p>เพิ่มข้อมูลลำดับ '+ i +'<label for="p_scnts"><input type="text" id="p_scnt'+ i +' " size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
i++;
return false;
});

$('.remScnt').live('click', function() { //ฟังชั่นลบ Element
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
</head>

<body>
<h2><a href="#" id="addScnt">ปุ่มเพิ่มข้อมูล</a></h2>
<div id="p_scents">
<p>
เพิ่มข้อมูลลำดับ 1 <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
</p>
</div>
</body>
</html>
แต่ว่าปัญหาคือ เวลาเพิ่ม Element ไปเรื่อยๆ และเวลาลบ Element ออก มันไม่เรียงลำดับตัวเลขให้ถูกต้องอ่าครับ(ตัวอย่างตามรูปภาพที่แนบมา) ไม่ทราบว่าจะมีวิธีเขียนเพิ่มเติมยังไงร๋อครับ ให้ตัวเลขมันเรียงไปเรื่อยๆแบบอัตโนมัติ ไม่ว่าจะลบจะเพิ่มยังไงอ่าครับ
ปล.ถ้าไงรบกวนช่วยตอบทีนะครับ ขอบคุณครับผม
Last edited by mindphp on 19/06/2012 2:13 pm, edited 1 time in total.
Reason: ย้ายกระทู้โพสผิดหมวด ครอบโค้ด [code=php] โค้ดของ ท่าน [/code] ภาพไม่ขึ้น โพสภาพอัพโหลดมาที่เว็บบอร์ดโดยตรงอย่าใช้เว็บฝากไฟล์
User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 13108
Joined: 18/04/2012 9:39 am

Re: javascript เพิ่มและลบ element html แบบเรียงลำดับอัตโนมัติ

Post by tsukasaz »

คล้ายๆ แบบนี้หรือเปล่าครับ

https://www.mindphp.com/forums/viewtopic ... 29&t=12215
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
User avatar
sunzandesign
PHP Newbie
PHP Newbie
Posts: 6
Joined: 08/05/2012 11:59 pm
Contact:

Re: javascript เพิ่มและลบ element html แบบเรียงลำดับอัตโนมัติ

Post by sunzandesign »

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function() {
	var scntDiv = $('#p_scents');
	var i = $('#p_scents p').size() + 1;

	$('#addScnt').live('click', function() { //ฟังชั่นเพิ่ม Element
		$('<p>เพิ่มข้อมูลลำดับ <span class="no">'+ i +'</span><label for="p_scnts"><input type="text" id="p_scnt'+ i +' " size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
		i++;
		return false;
	});

	$('.remScnt').live('click', function() { //ฟังชั่นลบ Element
		if( i > 2 ) {
			$(this).parents('p').remove();
			sortNumber();
		i--;
		}
		return false;
	});
});

function sortNumber()
{
	$('.no').each(function(index){
		$(this).text(index + 1);
	});
	
}
</script>
</head>

<body>
<h2><a href="#" id="addScnt">ปุ่มเพิ่มข้อมูล</a></h2>
<div id="p_scents">
<p>
เพิ่มข้อมูลลำดับ <span class="no">1</span> <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
</p>
</div>
</body>
</html>

ที่เพิ่มเติมมีอยู่ 2 ส่วนด้วยกันนะครับ
ที่ Element ของ HTML แก้ไขเป็น ===> เพิ่มข้อมูลลำดับ <span class="no">1</span>
จะเพิ่ม span ที่มีคลาสชื่อ no ไว้เป็นตัวอ้างอิงครับ

ส่วนที่ 2 ฟังก์ชั่นจาวาสคริปต์

Code: Select all

function sortNumber()
{
	$('.no').each(function(index){
		$(this).text(index + 1);
	});
	
}

จะเรียกใช้ตอนที่มีการคลิกเพิ่มครับ
$('.remScnt').live('click', function() { //ฟังชั่นลบ Element
if( i > 2 ) {
$(this).parents('p').remove();
sortNumber();
i--;
}
return false;
});

และส่วนของการเพิ่มใหม่ ก็จะเพิ่ม span เข้าไปเช่นกัน
$('#addScnt').live('click', function() { //ฟังชั่นเพิ่ม Element
$('<p>เพิ่มข้อมูลลำดับ <span class="no">'+ i +'</span><label for="p_scnts"><input type="text" id="p_scnt'+ i +' " size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
i++;
return false;
});

ลองนำโค๊ดไปรันดูนะครับ ^^
-------------------------------------
noomi
PHP Newbie
PHP Newbie
Posts: 2
Joined: 26/09/2012 5:32 pm

Re: javascript เพิ่มและลบ element html แบบเรียงลำดับอัตโนมัติ

Post by noomi »

พอดีได้งานเขียนเว็บด้วย CI FW แล้วต้องใช้ CKEditor กับ Jquery ก็ได้ไปเจอปัญหานึงของ Editor คือพิมพ์ข้อมูลเองใน Editor แล้วสามารถบันทึกได้ แต่พอไปก็อบปี้ข้อมูลจากที่อื่นมาใส่มันบันทึกไม่ได้ จากที่ตรวจแล้วแล้วเป็นเพราะ Editor มันสร้างโค้ด html ใส่ไปให้ซึ่งอะไรที่มี & นำหน้าจะไม่สามารถส่งข้อมูลไปได้ เช่น &ldquo; หรือ &rdquo; พวกนี้จะส่งไปไม่ได้
HurricaneCyber
PHP Full Member
PHP Full Member
Posts: 33
Joined: 27/08/2012 1:22 pm

Re: javascript เพิ่มและลบ element html แบบเรียงลำดับอัตโนมัติ

Post by HurricaneCyber »

ลองอ่านนี้ดู น่าจะเกี่ยวกับการใส่ Special Characters

http://drupal.org/node/1108046
User avatar
lnwpenclub
PHP Newbie
PHP Newbie
Posts: 1
Joined: 18/03/2016 10:21 pm

Re: javascript เพิ่มและลบ element html แบบเรียงลำดับอัตโนมัติ

Post by lnwpenclub »

ขอบคุณมากครับ
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “JavaScript & Jquery Ajax”

Who is online

Users browsing this forum: No registered users and 5 guests