Forgot Password ??

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

	Registered : 109,038

HOME > PHP > PHP Forum > ปรึกษาการเขียน Javascript มีช่อง กรอกตัวเลข แล้วให้เรียงจากน้อยไปหามาก

ปรึกษาการเขียน Javascript มีช่อง กรอกตัวเลข แล้วให้เรียงจากน้อยไปหามาก

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

Infinity

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

พอดี มีรายการที่วนลูปจากฐานข้อมูลมา ตามภาพ

แต่โจทย์คืออยากใส่ตัวเลขตรงช่อง Input แล้วแถวที่น้อยสุดจะถูกเรียงมาอันดับแรก

Tag : PHP, HTML, HTML5, JavaScript, Ajax, Angularjs

Date : 2018-01-09 11:03:26

By : the_cop

View : 1750

Reply : 17

No. 1

Infinity

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

ประมาณว่า กรอกช่องไหนแล้ว มันก็จะเด้งอัตโนมัติอะครับ ขอบคุณครับ

Date : 2018-01-09 11:04:35

By : the_cop

No. 2

Genesis™

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

งง นิดหน่อยครับ อธิบายให้ชัดเจนนิดนึง

ประวัติการแก้ไข
2018-01-09 11:47:54

Date : 2018-01-09 11:46:52

By : dudesaranyu

No. 3

Infinity

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

ตอบความคิดเห็นที่ : 2 เขียนโดย : dudesaranyu เมื่อวันที่ 2018-01-09 11:46:52

รายละเอียดของการตอบ ::

ขอบคุณครับ
ประมาณว่ามี จำนวน 10 แถว ซึงในแต่ละแถว จะมี Texbox ให้กรอกตัวเลข

- หากกรอก Texbox บันทัดที่ 10 เป็น 1 บันทัดที่ 10 จะเด้งมา บันทัดแรกอัตโนมัติ
- หากกรอก Texbox บันทัดที่ 8 เป็น 3 บันทัดที่ 8 จะเด้งมา ต่อบันทัดแรกอัตโนมัติ

** ให้มันจะเรียงจากน้อยไปหามาก ถ้า กรอก 2 ก็ไปต่อบันทัดที่ 1

ขอบคุณครับ

Date : 2018-01-09 11:53:10

By : the_cop

No. 4

tOm

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

มีเวลา เลยลองนั่งเขียนให้ครับ.. ประมาณนี้ครับ

<input type="text" name="num" value="1" /><br>
<input type="text" name="num" value="2" /><br>
<input type="text" name="num" value="3" /><br>
<input type="text" name="num" value="4" /><br>
<input type="text" name="num" value="5" /><br>
<input type="text" name="num" value="6" /><br>
<input type="text" name="num" value="7" /><br>
<input type="text" name="num" value="8" /><br>
<input type="text" name="num" value="9" /><br>
<input type="text" name="num" value="10" /><br>

<script>
var num = document.getElementsByName("num");

var sortNum = function(){
	var x = num.values();
	var arr = [];
	for (let a of x) {
		arr.push(a.value); 
	}	
	arr.sort(function(a, b){return a-b});
	//alert(arr.toString());
	for(var i=0;i < arr.length;i++){
		num[i].value = arr[i];
	}
}
for(var i=0;i < num.length;i++){
	num[i].addEventListener("change", sortNum);
}
</script>

Date : 2018-01-09 21:10:20

By : tomrambo

No. 5

tOm

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

มีเวลา เลยลองนั่งเขียนให้ครับ.. ประมาณนี้ครับ

<input type="text" name="num" value="1" /><br>
<input type="text" name="num" value="2" /><br>
<input type="text" name="num" value="3" /><br>
<input type="text" name="num" value="4" /><br>
<input type="text" name="num" value="5" /><br>
<input type="text" name="num" value="6" /><br>
<input type="text" name="num" value="7" /><br>
<input type="text" name="num" value="8" /><br>
<input type="text" name="num" value="9" /><br>
<input type="text" name="num" value="10" /><br>

<script>
var num = document.getElementsByName("num");

var sortNum = function(){
	var x = num.values();
	var arr = [];
	for (let a of x) {
		arr.push(a.value); 
	}	
	arr.sort(function(a, b){return a-b});
	//alert(arr.toString());
	for(var i=0;i < arr.length;i++){
		arr[i]==''?arr[i] = 0:'';
		num[i].value = arr[i];
	}
}
for(var i=0;i < num.length;i++){
	num[i].addEventListener("change", sortNum);
}
</script>

Date : 2018-01-09 21:36:05

By : tomrambo

No. 6

tOm

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

มีเวลา เลยลองนั่งเขียนให้ครับ.. ประมาณนี้ครับ

<input type="text" name="num" value="1" /><br>
<input type="text" name="num" value="2" /><br>
<input type="text" name="num" value="3" /><br>
<input type="text" name="num" value="4" /><br>
<input type="text" name="num" value="5" /><br>
<input type="text" name="num" value="6" /><br>
<input type="text" name="num" value="7" /><br>
<input type="text" name="num" value="8" /><br>
<input type="text" name="num" value="9" /><br>
<input type="text" name="num" value="10" /><br>

<script>
var num = document.getElementsByName("num");

var sortNum = function(){
	var x = num.values();
	var arr = [];
	for (let a of x) {
		arr.push(a.value); 
	}	
	arr.sort(function(a, b){return a-b});
	for(var i=0;i < arr.length;i++){
		arr[i]==''?arr[i] = 0:'';
		num[i].value = arr[i];
	}
}
for(var i=0;i < num.length;i++){
	num[i].addEventListener("change", sortNum);
}
</script>

Date : 2018-01-09 21:36:41

By : tomrambo

No. 7

tOm

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

มีเวลา เลยลองนั่งเขียนให้ครับ.. ประมาณนี้ครับ

<input type="text" name="num" value="1" /><br>
<input type="text" name="num" value="2" /><br>
<input type="text" name="num" value="3" /><br>
<input type="text" name="num" value="4" /><br>
<input type="text" name="num" value="5" /><br>
<input type="text" name="num" value="6" /><br>
<input type="text" name="num" value="7" /><br>
<input type="text" name="num" value="8" /><br>
<input type="text" name="num" value="9" /><br>
<input type="text" name="num" value="10" /><br>

<script>
var num = document.getElementsByName("num");
var sortNum = function(){
	var x = num.values();
	var arr = [];
	for (let a of x) {
		arr.push(a.value); 
	}	
	arr.sort(function(a, b){return a-b});
	for(var i=0;i < arr.length;i++){
		arr[i]==''?arr[i] = 0:'';
		num[i].value = arr[i];
	}
}
for(var i=0;i < num.length;i++){
	num[i].addEventListener("change", sortNum);
}
</script>

Date : 2018-01-09 21:38:11

By : tomrambo

No. 8

Infinity

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

ตอบความคิดเห็นที่ : 7 เขียนโดย : tomrambo เมื่อวันที่ 2018-01-09 21:38:11

รายละเอียดของการตอบ ::

+ 1 ครับ นี้ละครับที่ผมต้องการ

ขอบพระคุณมากๆครับ

Date : 2018-01-09 23:46:12

By : the_cop

No. 9

Infinity

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

ตอบความคิดเห็นที่ : 7 เขียนโดย : tomrambo เมื่อวันที่ 2018-01-09 21:38:11

รายละเอียดของการตอบ ::

พอดี ลอง Code นี้แล้ว Concept ได้ครับ

แต่มันเลื่อนสลับเฉพาะ input

อยากให้มันเลื่อนไปทั้งแถวต้องทำไงครับ

Date : 2018-08-30 13:39:37

By : the_cop

No. 10

Tuii

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

พอจะมี code ให้ดูไหมครับ

Date : 2018-08-30 13:53:29

By : Jatmentz

No. 11

Infinity

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

ตอบความคิดเห็นที่ : 10 เขียนโดย : Jatmentz เมื่อวันที่ 2018-08-30 13:53:29

รายละเอียดของการตอบ ::

Code (PHP)

<!DOCTYPE HTML>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Untitled Document</title>
	<script src="https://code.jquery.com/jquery-1.7.1.js" integrity="sha256-n8wkEJNAWUaIUDnfQoz6fwBRofK9vMWjE6F3qeNfiAY=" crossorigin="anonymous"></script>

</head>

<body>
	<table>
		<thead>
			<tr>
				<th>ชื่อ</th>
				<th>สกุล</th>
				<th>ลำดับ</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Dat</td>
				<td>son</td>
				<td>
					<input type="text" name="num" />
				</td>
			</tr>
			<tr>
				<td>coha</td>
				<td>baren</td>
				<td>
					<input type="text" name="num" />
				</td>
			</tr>
			<tr>
				<td>senga</td>
				<td>beda</td>
				<td>
					<input type="text" name="num" />
				</td>
			</tr>
			<tr>
				<td>mola</td>
				<td>bat</td>
				<td>
					<input type="text" name="num" />
				</td>
			</tr>
			<tr>
				<td>naoka</td>
				<td>ola</td>
				<td>
					<input type="text" name="num" />
				</td>
			</tr>
			<tr>
				<td>lakara</td>
				<td>pola</td>
				<td>
					<input type="text" name="num" />
				</td>
			</tr>
			<tr>
				<td>July</td>
				<td>Dooley</td>
				<td>
					<input type="text" name="num" />
				</td>
			</tr>
		</tbody>
	</table>

	<script>
		var num = document.getElementsByName("num");
		var sortNum = function () {
			var x = num.values();
			var arr = [];
			for (let a of x) {
				arr.push(a.value);
			}
			arr.sort(function (a, b) {
				return a - b
			});
			for (var i = 0; i < arr.length; i++) {
				arr[i] == '' ? arr[i] = 0 : '';
				num[i].value = arr[i];
			}
		}
		for (var i = 0; i < num.length; i++) {
			num[i].addEventListener("change", sortNum);
		}
	</script>
</body>

</html>

ตอนนี้มันเรียงลำดับเฉพาะ input ครับ

แต่แถวชื่อสกุลมันไม่ไปด้วยครับ

Date : 2018-08-30 15:43:38

By : the_cop

No. 12

Tuii

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

ตอบความคิดเห็นที่ : 11 เขียนโดย : the_cop เมื่อวันที่ 2018-08-30 15:43:38

รายละเอียดของการตอบ ::

Code

<!DOCTYPE HTML>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Untitled Document</title>
	<script src="https://code.jquery.com/jquery-1.7.1.js" integrity="sha256-n8wkEJNAWUaIUDnfQoz6fwBRofK9vMWjE6F3qeNfiAY=" crossorigin="anonymous"></script>

</head>

<body>
	<table>
		<thead>
			<tr>
				<th>ชื่อ</th>
				<th>สกุล</th>
				<th>ลำดับ</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Dat</td>
				<td>son</td>
				<td>
					<input type="text" name="num" onchange="changeNum(this);"/>
				</td>
			</tr>
			<tr>
				<td>coha</td>
				<td>baren</td>
				<td>
					<input type="text" name="num" onchange="changeNum(this);"/>
				</td>
			</tr>
			<tr>
				<td>senga</td>
				<td>beda</td>
				<td>
					<input type="text" name="num" onchange="changeNum(this);"/>
				</td>
			</tr>
			<tr>
				<td>mola</td>
				<td>bat</td>
				<td>
					<input type="text" name="num" onchange="changeNum(this);"/>
				</td>
			</tr>
			<tr>
				<td>naoka</td>
				<td>ola</td>
				<td>
					<input type="text" name="num" onchange="changeNum(this);"/>
				</td>
			</tr>
			<tr>
				<td>lakara</td>
				<td>pola</td>
				<td>
					<input type="text" name="num" onchange="changeNum(this);"/>
				</td>
			</tr>
			<tr>
				<td>July</td>
				<td>Dooley</td>
				<td>
					<input type="text" name="num" onchange="changeNum(this);"/>
				</td>
			</tr>
		</tbody>
	</table>

	<script>
		function changeNum(ele){
        	var value = $(ele).val(),
            	tr = $(ele).parents('tr'),
                clone = tr.clone(),
                dis = $(ele),
                eq = 0;
            
            $.each($('input[name="num"]'), function(i){
            	if($(this) !== dis){
                	if(value > $(this).val()){
                    	eq = i;
                    }
                }
            });
            
            $(ele).parents('table tbody').find('tr').eq(eq).after(clone);
            tr.remove();
        }
	</script>
</body>

</html>

ลองดูนะครับ

Date : 2018-08-30 17:22:26

By : Jatmentz

No. 13

Tuii

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

Code (JavaScript)

function changeNum(ele){
        	var value = $(ele).val(),
            	tr = $(ele).parents('tr'),
                clone = tr.clone(),
                dis = $(ele),
                eq = 0;
            if(isNaN(value)){
            	alert('กรุณากรอกตัวเลข');
                dis.val("");
                dis.focus();
                return false;
            }
            
            $.each($('input[name="num"]'), function(i){
            	if($(this) !== dis){
                	if(parseFloat(value) > 	parseFloat($(this).val()) || $(this).val() == ''){
                    	eq = i;
                    }
                }
            });
            
            $(ele).parents('table tbody').find('tr').eq(eq).after(clone);
            tr.remove();
        }

แก้ไขนิดนึงครับ

Date : 2018-08-30 17:37:13

By : Jatmentz

No. 14

Infinity

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

ตอบความคิดเห็นที่ : 13 เขียนโดย : Jatmentz เมื่อวันที่ 2018-08-30 17:37:13

รายละเอียดของการตอบ ::

โอ้ว ขอบพระคุณมากครับ ได้แล้วครับ :) +1 ครับ

Date : 2018-08-30 17:44:07

By : the_cop

No. 15

Infinity

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

ตอบความคิดเห็นที่ : 13 เขียนโดย : Jatmentz เมื่อวันที่ 2018-08-30 17:37:13

รายละเอียดของการตอบ ::

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

Date : 2018-08-31 11:12:21

By : the_cop

No. 16

Tuii

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

ตอบความคิดเห็นที่ : 15 เขียนโดย : the_cop เมื่อวันที่ 2018-08-31 11:12:21

รายละเอียดของการตอบ ::

ต้องการส่งค่าแบบไหนหรอครับ Submit form, Ajax
แล้ว ค่าที่ต้องการส่งไป มีอะไรบ้างครับ

Date : 2018-08-31 11:23:27

By : Jatmentz

No. 17

Infinity

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

ตอบความคิดเห็นที่ : 16 เขียนโดย : Jatmentz เมื่อวันที่ 2018-08-31 11:23:27

รายละเอียดของการตอบ ::

ส่งไปแบบ Submit form ธรรมดาครับ
จำนวนแถว วนลูปมาจากฐานข้อมูลครับ แล้วใส่ <input type="number" name="num"> ตรงนี้ทำได้แล้ว
ต่อไปเป็นการเรียง Script นี้ผมทำตามตัวอย่างได้แล้ว
แต่ต่อไปผมจะกดบันทึกข้อมูล เพื่อ เอาค่าที่ใส่ตัวเลขในแต่ละแถว ไป Update ตาม id ในแต่ละแถว ที่ผมทำ hidden ไว้
ปต่ผมสงสัยว่าจะเขียนบันทึกค่ายังไงครับ ต้องทำเป็น Array แบบไหน
ขอบคุณครับ

Date : 2018-08-31 11:49:24

By : the_cop

No. 18

Tuii

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

ตอบความคิดเห็นที่ : 17 เขียนโดย : the_cop เมื่อวันที่ 2018-08-31 11:49:24

รายละเอียดของการตอบ ::

ใส่ [] หลังชื่อ element ที่เป็นซ้ำกันหลายจำนวนครับ เหมือนระบุให้ข้อมูลเป็นแบบ Array
ตัวอย่าง
test.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form action="save.php" method="post" autocomplete="off">
		<table>
			<tbody>
				<tr>
					<td><input type="text" name="id[]"></td>
					<td><input type="text" name="num[]"></td>
				</tr>
				<tr>
					<td><input type="text" name="id[]"></td>
					<td><input type="text" name="num[]"></td>
				</tr>
				<tr>
					<td><input type="text" name="id[]"></td>
					<td><input type="text" name="num[]"></td>
				</tr>
				<tr>
					<td><input type="text" name="id[]"></td>
					<td><input type="text" name="num[]"></td>
				</tr>
			</tbody>
		</table>

		<button type="submit">Submit</button>
	</form>
</body>
</html>

save.php

<?php
$id = $_POST['id'];
$num = $_POST['num'];

foreach($id as $index => $value){
	echo '<pre>', $id[$index], '</pre>';
	echo '<pre>', $num[$index], '</pre>';
}
?>

Date : 2018-08-31 12:09:19

By : Jatmentz

No. 19

Chaidhanan

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

กะจะไม่ทำเองบ้างเลยหรือครับ ทำผิดแล้วเอาโค๊ดผิดมาแสดงดีกว่าไหม จะได้คอมเม้นท์สิ่งที่เข้าใจผิด
แล้วแบบนี้ จะได้ความรู้ยังไงล่ะเนี่ย คนอื่นทำให้หมด สอบผ่านแล้วก็เอาใบประกาศมาให้คนตอบด้วยนะ

Date : 2018-08-31 12:22:38

By : Chaidhanan

No. 20

Infinity

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

ตอบความคิดเห็นที่ : 18 เขียนโดย : Jatmentz เมื่อวันที่ 2018-08-31 12:09:19

รายละเอียดของการตอบ ::

ขอบพระคุณมากครับ

ตอบความคิดเห็นที่ : 19 เขียนโดย : Chaidhanan เมื่อวันที่ 2018-08-31 12:22:38

รายละเอียดของการตอบ ::

ครับผม

Date : 2018-08-31 12:38:34

By : the_cop

ค้นหาข้อมูล

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

Re : ปรึกษาการเขียน Javascript มีช่อง กรอกตัวเลข แล้วให้เรียงจากน้อยไปหามาก

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

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

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); ปรึกษาการเขียน Javascript มีช่อง กรอกตัวเลข แล้วให้เรียงจากน้อยไปหามาก

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

No. 7

No. 8

No. 9

No. 10

No. 11

No. 12

No. 13

No. 14

No. 15

No. 16

No. 17

No. 18

No. 19

No. 20

ค้นหาข้อมูล

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

Notice

ปรึกษาการเขียน Javascript มีช่อง กรอกตัวเลข แล้วให้เรียงจากน้อยไปหามาก