ข้ามไปที่เนื้อหาหลัก

หาค่ามากที่สุด Max ด้วย JavaScript + jQuery - สอน JavaScript

สำหรับบทความนี้จะมาสาธิตการใช้ JavaScript กับ jQuery ในการหาค่าที่มากที่สุด หรือ Max Value ของ Input ที่กำหนดไว้ด้วยแอตทริบิวต์ Class ซึ่งจะใช้วิธีที่แตกต่างกันถึง 3 วิธี

  1. วนลูปด้วย each ของ jQuery และเปรียบเทียบค่ามากที่สุด
  2. วนลูปด้วย each ของ jQuery แล้วเก็บเป็นอาร์เรย์ แล้วใช้ฟังก์ชั่นทางคณิตศาสตร์ Math เพื่อเลือกค่าที่สุดจากอาร์เรย์
  3. ใช้ฟังก์ชั่น map ของ jQuery ดัง value ของ textbox ทุกตัวที่กำหนดไว้ด้วย class เดียวกันออกมาเป็นอาร์เรย์แล้วใช้ฟังก์ชั่นทางคณิตศาสตร์ Math เพื่อเลือกค่าที่สุดจากอาร์เรย์




--------------------------------------------------------------
ตัวอย่างหน้าแสดงผล 
--------------------------------------------------------------
ฟังก์ชั่นสำหรับหาค่าสูงสุดด้วย JavaScript








--------------------------------------------------------------
ซอร์สโค๊ด JavaScript + Html ทั้งหมด 
--------------------------------------------------------------
 <script>
function findMaxValue() {
    var maxValue = 0;
    $('.score').each(function(indexInArray) {
        var val = $(this).val();
        val = parseInt(val);//parseFloat();
        if (maxValue === 0 || maxValue < val) {
            maxValue = val;
        }
    });
    return maxValue;
}

function findMaxValue2() {
    var _array = [];
    $('.score').each(function(indexInArray) {
        _array.push(parseInt($(this).val()));
    });
    return Math.max.apply(Math,_array);
}

function findMaxValue3() {
    var _array = $( ".score" ).map(function() {
                    return parseInt($( this ).val());
                  });
    return Math.max.apply(Math,_array);
}

</script>

<table width="100%">
<tr>
<td width="30%" valign="top">
ฟังก์ชั่นสำหรับหาค่าสูงสุดด้วย JavaScript
<div id="center">
    <input class="score" value="10" name="test" type="text"><br>
    <input class="score" value="32" type="text"><br>
    <input class="score" value="20" type="text"><br>
    <input class="score" value="40" type="text"><br>
    <input class="score" value="49" type="text"><br>
    <input class="score" value="8" type="text"><br>
    <input class="score" value="10" type="text"><br>
</div>
<h4 id="result"></h4>
<h4 id="result2"></h4>
<h4 id="result3"></h4>

<input type="button" onclick="process()" value="วิธีที่ 1"/>
<input type="button" onclick="process2()" value="วิธีที่ 2"/>
<input type="button" onclick="process3()" value="วิธีที่ 3"/>

</td>
<td valign="top">
<div id="process1" style="display:none">
วิธีที่ 1:
<textarea style="width:100%;height:160px">
    var maxValue = 0;
    $('.score').each(function(indexInArray) {
        var val = $(this).val();
        val = parseInt(val);//parseFloat();
        if (maxValue === 0 || maxValue < val) {
            maxValue = val;
        }
    });
    return maxValue;
</textarea>
</div>
<div id="process2" style="display:none">
วิธีที่ 2:
<textarea style="width:100%;height:117px">
    var _array = [];
    $('.score').each(function(indexInArray) {
        _array.push(parseInt($(this).val()));
    });
    return Math.max.apply(Math,_array);
</textarea>
</div>
<div id="process3" style="display:none">
วิธีที่ 3:
<textarea style="width:100%;height:108px">
    var _array = $( ".score" ).map(function() {
                    return parseInt($( this ).val());
                  });
    return Math.max.apply(Math,_array);
</textarea>
</div>
</td>
</tr>
</table>


<script>

function process(){
    $('#result').html("1) ค่าสูงสุด คือ : " + findMaxValue());
    $('#process1').show();
}


function process2(){
    $('#result2').html("2) ค่าสูงสุด คือ : " + findMaxValue2());
    $('#process2').show();
}

function process3(){
    $('#result3').html("3) ค่าสูงสุด คือ : " + findMaxValue3());
    $('#process3').show();
}


</script>


อ้างอิง
  • http://api.jquery.com/map/
  • http://stackoverflow.com/questions/11985341/get-max-and-min-value-from-array-in-javascript
  • http://www.w3schools.com/jsref/jsref_push.asp
ป้ายกำกับ:

ความคิดเห็น

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

โพสต์ยอดนิยมจากบล็อกนี้

แจกฟรี!! ระบบต่างๆที่พัฒนาด้วย PHP สำหรับนำไปใช้ในงานต่างๆ

       สำหรับหลายท่านที่ขอโค้ดเข้ามาทาง Inbox ของเฟซบุ๊กแฟนเพจ หรือถามถึงระบบต่างๆหลังไมค์มานั้น ส่วนใหญ่ก็มีแจกอยู่แล้วในเว็บบอร์ด ThaiCreate.Com นะครับ และด้านล่างนี้ก็เป็นระบบต่างๆที่แจกให้นำไปลองใช้ลองศึกษากันครับ
แสดงความคิดเห็น
Read more »

สอนเขียน PHP แสดงการจองห้องประชุมแบบไฮไลท์ตามช่วงเวลา (แบบเชื่อมต่อฐานข้อมูล MySQL)

ตัวอย่าง ผลลัพธ์ที่ได้จากการจองในฐานข้อมูล ตาราง tb_room สร้างตารางรายชื่อห้องประชุม สำหรับ id นั้นเป็น Primarykey จะกำหนดให้สร้างอัตโนมัติ ทุกครั้งที่เราเพิ่มชื่อห้องประชุมใหม่ -- -- Database: `tobedev_example` -- -- -------------------------------------------------------- -- -- Table structure for table `tb_room` -- CREATE TABLE IF NOT EXISTS `tb_room` (   `id` int(11) NOT NULL,   `name` varchar(30) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8; -- -- Dumping data for table `tb_room` -- INSERT INTO `tb_room` (`id`, `name`) VALUES (1, 'ห้องประชุม 1'), (2, 'ห้องประชุม 2'), (3, 'ห้องประชุม 3'), (4, 'ห้องประชุม 4'), (5, 'ห้องประชุม 5'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tb_room` -- ALTER TABLE `tb_room`   ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tb_room` -- ALTER TABLE `tb_room`   MODIFY `i...
แสดงความคิดเห็น
Read more »

PHP กับการคิดส่วนลดเป็นเปอร์เซ็น 5%, 10%, 20% ตามช่วงราคาที่กำหนด

<?php     $total_price = 1000;     $discount = 0;         if($total_price >= 500 && $total_price < 1001){         $discount = 5;     }elseif($total_price >= 1001 && $total_price <= 5000){         $discount = 10;     }elseif($total_price >= 5001){         $discount = 20;     }         $discount_bath = ($total_price*$discount)/100; ?> <pre> ซื้อสินค้าครบ 0 ถึง 499 บาท ไม่ได้ส่วนลด ซื้อสินค้าครบ 500 ถึง 1000 บาท ได้ส่วนลด 5% ซื้อสินค้าครบ 1001 ถึง 5000บาท ได้ส่วนลด 10% ซื้อสินค้าครบ 5001 บาทขึ้นไป ได้ส่วนลด 20% </pre> <h3>รวมราคาสินค้า = <?php echo number_format($total_price,2);?></h3> <h5>ส่วนลด = <?php echo $discount;?>%  (<?php echo $discount_bath;?...
แสดงความคิดเห็น
Read more »