Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

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

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

เริ่มหัวข้อใหม่

auncore

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

สวัสดีครับ รบกวนถามหน่อยนะครับ
คือว่าจากโค๊ด เขียนให้มัน เพิ่ม-ลบ 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 ออก มันไม่เรียงลำดับตัวเลขให้ถูกต้องอ่าครับ(ตัวอย่างตามรูปภาพที่แนบมา) ไม่ทราบว่าจะมีวิธีเขียนเพิ่มเติมยังไงร๋อครับ ให้ตัวเลขมันเรียงไปเรื่อยๆแบบอัตโนมัติ ไม่ว่าจะลบจะเพิ่มยังไงอ่าครับ
ปล.ถ้าไงรบกวนช่วยตอบทีนะครับ ขอบคุณครับผม

Tag : PHP, HTML/CSS, JavaScript

Date : 2012-06-19 12:59:35

By : auncore

View : 4424

Reply : 2

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

เนื่องจากมันถูกเขียน inner ลงใน element แล้วน่ะครับ วิธีแก้ไขคือเอาออกไปเลยครับ

Date : 2012-06-19 17:02:22

By : mr.win

No. 2

Guest

ลบอันสุดท้ายก่อนเลยครับ

Code (PHP)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script src="js/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></p>').appendTo(scntDiv);
                i++;
                return false;
        });
        
        $('#remScnt').live('click', function() { //ฟังชั่นลบ Element
                if( i > 2 ) {
                        $('p:last').remove();
                        i--;
                }
                return false;
        });
});
</script>
</head>

<body>
<a href="#" id="addScnt">ปุ่มเพิ่มข้อมูล</a> | <a href="#" id="remScnt">ปุ่มลบข้อมูล</a>
<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>

Date : 2012-06-19 18:00:22

By : ความรู้เท่าหางอึ่ง

ค้นหาข้อมูล

แสดงความคิดเห็น

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

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05