Forgot Password ??

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

	Registered : 109,038

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

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

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

Infinity

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

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

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

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

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

By : the_cop

View : 1688

Reply : 17

No. 1

Infinity

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

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

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

By : the_cop

No. 2

Genesis™

โพสกระทู้ ( 4,170 )
บทความ ( 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>"); [PHP] ปรึกษาการเขียน 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

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