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

JavaScript & jQuery - การตั้งค่า TABINDEX เพื่อ Focus ช่องกรอกข้อมูล





<?php include "mysql_connect.php";?>
<html>
<head>
<title>PHP MySQL กับการตั้งค่า TABINDEX : SUNZANDESIGN.BLOGSPOT.COM</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">

<style>

    .highlight {
        background-color: #FFFF88;
    }

    .red{
        color : red;
    }
    .blue{
        color : blue
    }
</style>
</head>
<body>
    <div class="container">
   
      <div class="header clearfix">
        <h3 class="text-muted">
            <span class="blue">PHP MySQL</span> การตั้งค่า
            <span class="red">TABINDEX</span>
            : SUNZANDESIGN.BLOGSPOT.COM    </h3>
      </div>
        <br/>
   
      <div class="row">
        <?php
            $data = array();
            $sql = "SELECT * FROM product ";
            //echo $sql;
            if ($result = $conn->query($sql)) {
                while($row = $result->fetch_array(MYSQLI_ASSOC)){
                    $data[] = $row;
                }
                /* free result set */
                $result->close();
            }
            $conn->close();
        ?>
        
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>รหัส</th>
                    <th>ชื่อ</th>
                    <th>จำนวน</th>
                    <th>ราคา</th>
                    <th>รูปภาพ</th>
                    <th>หมายเหตุ</th>
                </tr>
            </thead>
            <tbody>
                <?php
                    foreach($data as $row){
                ?>
                <tr>
                    <td><?php echo $row['ProductID'];?></td>
                    <td><?php echo $row['ProductName'];?></td>
                    <td>
                        <input class="qty"
                            value="<?php echo $row['Qty'];?>" /></td>
                    <td>
                        <input class="price"
                            value="<?php echo number_format($row['Price'],2);?>" />
                        </td>
                    <td><input value="<?php echo $row['Picture'];?>" /></td>
                    <td><textarea></textarea></td>
                </tr>
                <?php }?>
            </tbody>
        </table>
      </div>
     
    </div><!-- container -->

    <footer class="footer">
        <br/><br/>
        <div class="container">
        <i>ติดตามความเคลื่อนไหวได้ที่ :: <a href='https://www.facebook.com/ToBeDeveloper'>https://www.facebook.com/ToBeDeveloper</a></i>
        </div>
    </footer>

</div> <!-- /container -->

<script src="js/jquery.min.js"></script>
<script src="js/highlight.js"></script>

<script>

$('input.price, input.qty').each(function(index) {
    var tabindex = index + 1;
    $(this).attr("tabindex", tabindex);
    alert('SET TABINDEX : ' + index);
    $(this).addClass('red');
});

</script>
</body>
</html>

ความคิดเห็น

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

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

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

สร้างแบบฟอร์มล็อกอิน HTML + PHP

       ผมจะสร้างระบบตัวอย่างเพื่อแสดงให้เห็นการทำงานของสคริปต์ PHP ที่ใช้ในการล็อกอินอย่างง่ายๆ นะครับ โดยที่ผมจะสร้างโฟลเดอร์ใหม่ขึ้นในไดร์ฟที่เราได้กำหนดให้เป็น Directory Root สำหรับรันสคริปต์ PHP ซึ่งผมกำหนดเอาไว้ที่ D:\www ดังนั้นผมจะสร้างโฟลเดอร์ teacher_assistant ขึ้นมาใหม่จะได้พาธเป็น D:\www\teacher_assistant สำหรับการเข้าถึง จะใช้ URL ดังนี้ http://localhost/teacher_assistant หลังจากสร้างโฟลเดอร์เสร็จเรียบร้อยก็จะเริ่มกระบวนการเตรียมโครงสร้างโปรเจ็กต์ด้วยเครื่องมือช่วยเขียนโปรแกรมชื่อว่า eclipse ซึ่งดูวิธีการสร้างโปรเจ็กต์ได้จากบทความ เริ่มต้นสร้างโปรเจ็กต์ ด้วยโปรแกรม eclipse เครื่องมือเขียนโปรแกรม php ในบทความเป็นการสร้างโปรเจ็กต์ที่มีพาธเป็นโฟลเดอร์ login แต่ในที่นี้ต้องเป็นพาธให้ตรงกับโฟลเดอร์ใหม่ที่เราได้สร้างขึ้นด้วยนะครับ

การดึงข้อมูล MySQL มาแสดงในปฏิทิน Fullcalendar ด้วย PHP

หลักการทำงาน เรียกข้อมูลจากตาราง tb_event ด้วยฟังก์ชั่นของ MySQLi ข้อมูลจากฐานข้อมูลจะถูกวนลูปเก็บไว้ใน $data และจะถูกส่งไปที่ Fullcalendar ด้วยการแปลงข้อมูลจาก PHP ให้อยู่ในรูปแบบ JSON อาร์เรย์ด้วยฟังก์ชั่น json_encode() PHP Code <?php //Database $data = array(); $link = mysqli_connect("127.0.0.1", "tobedev", "1234", "tobedev_example"); mysqli_set_charset($link, 'utf8'); if (!$link) {     echo "Error: Unable to connect to MySQL." . PHP_EOL;     echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;     echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;     exit; } $query = "SELECT * FROM tb_event"; if ($result = $link->query($query)) {     /* fetch object array */     while ($obj = $result->fetch_object()) {        $data[] = array(                 ...