javascript เพิ่มและลบ element html แบบเรียงลำดับอัตโนมัติ
โพสต์แล้ว: 19/06/2012 12:54 pm
สวัสดีครับ รบกวนถามหน่อยนะครับ
คือว่าจากโค๊ด เขียนให้มัน เพิ่ม-ลบ Element ครับ
แต่ว่าปัญหาคือ เวลาเพิ่ม Element ไปเรื่อยๆ และเวลาลบ Element ออก มันไม่เรียงลำดับตัวเลขให้ถูกต้องอ่าครับ(ตัวอย่างตามรูปภาพที่แนบมา) ไม่ทราบว่าจะมีวิธีเขียนเพิ่มเติมยังไงร๋อครับ ให้ตัวเลขมันเรียงไปเรื่อยๆแบบอัตโนมัติ ไม่ว่าจะลบจะเพิ่มยังไงอ่าครับ
ปล.ถ้าไงรบกวนช่วยตอบทีนะครับ ขอบคุณครับผม
คือว่าจากโค๊ด เขียนให้มัน เพิ่ม-ลบ Element ครับ
โค้ด: เลือกทั้งหมด
<!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>
ปล.ถ้าไงรบกวนช่วยตอบทีนะครับ ขอบคุณครับผม