Forgot Password ??

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

	Registered : 109,037

HOME > PHP > PHP Forum > การใช้ jquery เพิ่มลำดับโดยเอาค่ามากขึ้นก่อน ช่วยหน่อยครับ

การใช้ jquery เพิ่มลำดับโดยเอาค่ามากขึ้นก่อน ช่วยหน่อยครับ

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

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

จาก code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
    $('#btnPluz').click(function(){
        var num=parseInt($('#number').val())+1;
		var tr=$("<tr id='tr"+num+"'><td> ลำดับที่ <span></span> </td></tr>");
       	var i=1;
		$('#tbody').append(tr);
		$('#tbody span').each(function(index, element) {
            i++
            $(this).text(i);
        });	
        $('#number').val(num);
    });
});
</script>
<table>
<tr>
<td>
 <span>
 	<input type="number" id="number" value="1" size="5" readonly>
	<button type="button" id="btnPluz" >เพิ่ม</button></span>
</td>
</tr>
      	<tbody id="tbody">
        <tr><td> ลำดับที่ 1 </td></tr>
       </tbody> 
</table>

เมื่อกดปุ่ม "เพิ่ม" ค่าก็จะเรียงจาก 1 2 3 ... ไปเรื่อย ๆ

แต่อยากให้มันเรียงกลับกัน เช่น กด ปุ่ม "เพิ่ม" 5 ครั้ง ลำดับจะเรียง เป็น 5 4 3 2 1
แนะนำหน่อยครับ

Tag : PHP, jQuery

ประวัติการแก้ไข
2014-10-27 19:19:22

Date : 2014-10-27 19:18:39

By : apisitp

View : 1743

Reply : 6

No. 1

Chaidhanan

โพสกระทู้ ( 9,586 )
บทความ ( 2 )

กด 1 ครั้งเรียงยังไง 2,3,4 เรียงยังไงครับ

Date : 2014-10-27 19:29:44

By : Chaidhanan

No. 2

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

ค่ามันจะวนลูปและเอาไปโชว์ใน span ครับ มันก็จะเพิ่มตาม i ไปเรื่อย ๆ
จาก 1
พอขึ้นบรรทัดใหม่ก็เป็น 2
บรรทัดใหม่ก็ 3
1
2
3

แต่อยากให้แสดงเป็น
3
2
1
แทน

พอกดเพิ่ม ก็เป็น
4
3
2
1

อธิบายไม่เคลียขออภัยด้วยนะครับ

ประวัติการแก้ไข
2014-10-27 19:48:23

Date : 2014-10-27 19:47:53

By : apisitp

No. 3

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

นั่งคิด มา 3 วัน แก้ได้แล้วครับ .... ฮ่า ๆ ๆ
ขออภัยที่รีบโพสต์ถามก่อน
ปล.ต้องลองเล่น code ด้านบนก่อน
จากนั้นแก้ในส่วน code เป็นแบบนี้ครับ

<script>
$(function(){
    $('#btnPluz').click(function(){
        var num=parseInt($('#number').val())+1;
		var tr=$("<tr id='tr"+num+"' rel='"+num+"'><td> ลำดับที่ <span id='ss"+num+"' ></span> </td></tr>");
       	var i=1;
		$('#tbody tr:first').before(tr);
        $('#number').val(num);
				var xx=$("#tbody tr:first").attr('rel');
		//alert(xx);
		$("#ss"+num).text(xx);	
    });
});
</script>
<table>
<tr>
<td>
 <span>
 	<input type="number" id="number" value="1" size="5" readonly>
	<button type="button" id="btnPluz" >เพิ่ม</button></span>
</td>
</tr>
      	<tbody id="tbody">
        <tr id="tr1" rel="1"><td> ลำดับที่ 1 </td></tr>
       </tbody> 
</table>

ประวัติการแก้ไข
2014-10-27 20:00:29

Date : 2014-10-27 19:53:19

By : apisitp

No. 4

Chaidhanan

โพสกระทู้ ( 9,586 )
บทความ ( 2 )

var tr=$("<tr id='tr"+num+"'><td> ลำดับที่ <span>"+num+"</span> </td></tr>");

$( tr ).insertBefore('table > tbody > tr:first');

Date : 2014-10-27 19:55:53

By : Chaidhanan

No. 5

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

ขอบคุณครับ ใช้ได้เหมือนกันเลยครับ

Date : 2014-10-27 19:59:13

By : apisitp

No. 6

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
    $('#btnPluz').click(function(){
        var num=parseInt($('#number').val())+1;
       	var tr=$("<tr id='tr"+num+"' rel='"+num+"'><td> ลำดับที่ <span>"+num+"</span><button id='btnDel' rel='"+num+"' class='btn btn-danger'>&nbsp;&nbsp;&nbsp;&nbsp;ลบข้อมูล&nbsp;&nbsp;&nbsp;&nbsp;</button>  </td></tr>");
		$('#tbody tr:first').before(tr);
        $('#number').val(num);
	 });

  $('#tbody').on('click','#btnDel',function(){
		var num=parseInt($('#number').val())-1;
        var rel=$(this).attr('rel');
		var rowCount = $('#tbody>tr').length;
		 var i=rowCount;
		$('#number').val(num);
        $("#tr"+rel+"").remove();
     	$('#tbody span').each(function(index, element) {
            i--
		     $(this).text(i);
		});
    });
});
</script>
<table>
<tr>
<td>
 	<input type="number" id="number" value="1" size="5" readonly>
	<button type="button" id="btnPluz" >เพิ่ม</button>
</td>
</tr>
      	<tbody id="tbody">
        <tr id="tr1" rel="1"><td> ลำดับที่ <span> 1 </span> </td></tr>
       </tbody> 
</table>

Date : 2014-10-28 13:04:33

By : apisitp

ค้นหาข้อมูล

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

Re : การใช้ jquery เพิ่มลำดับโดยเอาค่ามากขึ้นก่อน ช่วยหน่อยครับ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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