23 ก.ย. 2559

PHP MySQL การสร้าง Matrix Table

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

ตารางหมวดหมู่ php mysql metrix table

ตารางสินค้า php mysql metrix table

ผลลัพธ์ php mysql metrix table
ผลลัพธ์



16 ก.ย. 2559

JavaScript & jQuery การกดลูศร เพื่อควบคุมทิศทาง Focus ช่อง INPUT



JavaScript & jQuery การกดลูศร เพื่อควบคุมทิศทาง Focus ช่อง INPUT เป็นการกำหนดจำนวนคอลัมน์ และบวกลบตำแหน่ง index ของอีเลเมนต์แต่ละตัว เพื่อวิ่งไป Focus ในส่วนที่ต้องการจากการกดปุ่มลูกศรแต่ละครั้ง

Download Source Code

13 ก.ย. 2559

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>

Translate