Mindphp.com เว็บ สอนสร้างเว็บไซต์ เว็บเซอเวอร์ Hosting Web Server สอน Joomla phpbb
(New Look)
หน้าเว็บบอร์ด » Webboard » JavaScript & Jquery Ajax » javascript เพิ่มและลบ element html แบบเรียงลำดับอัตโนมัติ
 

ป้ายรับอบมรม ทำเว็บทำเว็บ PHP
				
* เข้าสู่ระบบ    * สมัครสมาชิก   * FAQ




โพสต์กระทู้ใหม่ กลับไปยังกระทู้  [ 5 โพสต์ ] 
เจ้าของ ข้อความ
โพสต์โพสต์แล้ว: 19/06/2012 1:54 pm 
สวัสดีครับ รบกวนถามหน่อยนะครับ
คือว่าจากโค๊ด เขียนให้มัน เพิ่ม-ลบ 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>

แต่ว่าปัญหาคือ เวลาเพิ่ม Element ไปเรื่อยๆ และเวลาลบ Element ออก มันไม่เรียงลำดับตัวเลขให้ถูกต้องอ่าครับ(ตัวอย่างตามรูปภาพที่แนบมา) ไม่ทราบว่าจะมีวิธีเขียนเพิ่มเติมยังไงร๋อครับ ให้ตัวเลขมันเรียงไปเรื่อยๆแบบอัตโนมัติ ไม่ว่าจะลบจะเพิ่มยังไงอ่าครับ
ปล.ถ้าไงรบกวนช่วยตอบทีนะครับ ขอบคุณครับผม


แก้ไขล่าสุดโดย mindphp เมื่อ 19/06/2012 3:13 pm, แก้ไขแล้ว 1 ครั้ง
ย้ายกระทู้โพสผิดหมวด ครอบโค้ด [code=php] โค้ดของ ท่าน [/code] ภาพไม่ขึ้น โพสภาพอัพโหลดมาที่เว็บบอร์ดโดยตรงอย่าใช้เว็บฝากไฟล์


รายงานในข้อความ
     
ตอบกลับพร้อมอ้างอิง  
โพสต์โพสต์แล้ว: 20/06/2012 11:16 am 
ออฟไลน์
PHP VIP Members
PHP VIP Members
ภาพประจำตัวสมาชิก

ลงทะเบียนเมื่อ: 18/04/2012 10:39 am
โพสต์: 2865
คล้ายๆ แบบนี้หรือเปล่าครับ

viewtopic.php?f=29&t=12215


รายงานในข้อความ
ข้างบน  ข้อมูลส่วนตัว
 E-mail  
ตอบกลับพร้อมอ้างอิง  
โพสต์โพสต์แล้ว: 21/09/2012 2:23 am 
ออฟไลน์
PHP Newbie
PHP Newbie
ภาพประจำตัวสมาชิก

ลงทะเบียนเมื่อ: 09/05/2012 12:59 am
โพสต์: 5
โค้ด:
<!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 ฟังก์ชั่นจาวาสคริปต์
โค้ด:
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;
});

ลองนำโค๊ดไปรันดูนะครับ ^^

_________________
-------------------------------------


รายงานในข้อความ
ข้างบน  ข้อมูลส่วนตัว
 E-mail  
ตอบกลับพร้อมอ้างอิง  
โพสต์โพสต์แล้ว: 18/10/2012 2:26 pm 
ออฟไลน์
PHP Newbie
PHP Newbie

ลงทะเบียนเมื่อ: 26/09/2012 6:32 pm
โพสต์: 2
พอดีได้งานเขียนเว็บด้วย CI FW แล้วต้องใช้ CKEditor กับ Jquery ก็ได้ไปเจอปัญหานึงของ Editor คือพิมพ์ข้อมูลเองใน Editor แล้วสามารถบันทึกได้ แต่พอไปก็อบปี้ข้อมูลจากที่อื่นมาใส่มันบันทึกไม่ได้ จากที่ตรวจแล้วแล้วเป็นเพราะ Editor มันสร้างโค้ด html ใส่ไปให้ซึ่งอะไรที่มี & นำหน้าจะไม่สามารถส่งข้อมูลไปได้ เช่น &ldquo; หรือ &rdquo; พวกนี้จะส่งไปไม่ได้

_________________
Neatleather http://www.neatleather.com/


รายงานในข้อความ
ข้างบน  ข้อมูลส่วนตัว
 E-mail  
ตอบกลับพร้อมอ้างอิง  
โพสต์โพสต์แล้ว: 22/10/2012 4:00 pm 
ออฟไลน์
PHP Full Member
PHP Full Member

ลงทะเบียนเมื่อ: 27/08/2012 2:22 pm
โพสต์: 33
ลองอ่านนี้ดู น่าจะเกี่ยวกับการใส่ Special Characters

http://drupal.org/node/1108046


รายงานในข้อความ
ข้างบน  ข้อมูลส่วนตัว
 E-mail  
ตอบกลับพร้อมอ้างอิง  
แสดงโพสจาก:  เรียงตาม  
โพสต์กระทู้ใหม่ กลับไปยังกระทู้  [ 5 โพสต์ ] 

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

เขตเวลา GMT + 7 ชั่วโมง [ DST ]

javascript เพิ่มและลบ element html แบบเรียงลำดับอัตโนมัติ   ตอบกลับ   แสดง   โพสต์ล่าสุด 
JavaScript Date Library สำหรับ
โดย mindphp » 29/10/2014 5:24 pm

0 ตอบกลับ

115 แสดง

โพสต์ล่าสุด โดย mindphp ดูข้อความล่าสุด
29/10/2014 5:24 pm
Jquery & Ajax Knowledge

รับสอน html javascript&jquery css ทั้งหมด 5000 บาท เรียนจบสามารถทำงานได้ สอนแบบต
โดย แบงค์ครับ » 11/10/2014 1:54 pm

0 ตอบกลับ

242 แสดง

โพสต์ล่าสุด โดย แบงค์ครับ ดูข้อความล่าสุด
11/10/2014 1:54 pm
Programming - PHP

Selenium IDE - วิธีกรอกค่าที่ต้องการผ่านป็อปอัพของjavascript
โดย chbbk » 03/10/2014 5:28 pm

0 ตอบกลับ

151 แสดง

โพสต์ล่าสุด โดย chbbk ดูข้อความล่าสุด
03/10/2014 5:28 pm
Software testing

javascript ใช้ใน werkzeug ได้มั้ยค่ะ
โดย thatsawan » 29/09/2014 1:25 pm

0 ตอบกลับ

152 แสดง

โพสต์ล่าสุด โดย thatsawan ดูข้อความล่าสุด
29/09/2014 1:25 pm
Programming - C/C++ & java & Python

ใช้ javascript ใน Django ได้ยังไงค่ะ
โดย thatsawan » 29/09/2014 1:24 pm

1 ตอบกลับ

205 แสดง

โพสต์ล่าสุด โดย jay_limm ดูข้อความล่าสุด
06/10/2014 12:05 pm
Programming - C/C++ & java & Python


ท่าน สามารถ โพสกระทู้ในบอร์ดนี้ได้
ท่าน สามารถ ตอบกระทู้ในบอร์ดนี้ได้
ท่าน ไม่สามารถ แก้ไขโพสของท่านในบอร์ดนี้ได้
ท่าน ไม่สามารถ ลบโพสของท่านในบอร์ดนี้ได้
ท่าน ไม่สามารถ แนบไฟล์ในบอร์ดนี้ได้

ไปที่:  
Powered by phpBB® Forum Software © phpBB Group
Thai language by Mindphp.com & phpBBThailand.com