sondmk header
พื้นฐานการใช้งาน jQuery เบื้องต้น

jQuery : Preview Image Before Upload

Post by Goborijung at 2021-08-08 11:38:49 | ID: 1311

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file-input" type="file" multiple>
<div id="preview"></div>

<script>
function previewImages() {

  var $preview = $('#preview').empty();
  if (this.files) $.each(this.files, readAndPreview);

  function readAndPreview(i, file) {
    
    if (!/.(jpe?g|png|gif)$/i.test(file.name)){
      return alert(file.name +" is not an image");
    } // else...
    
    var reader = new FileReader();

    $(reader).on("load", function() {
      $preview.append($("<img/>", {src:this.result, height:100}));
    });

    reader.readAsDataURL(file);
    
  }

}

$('#file-input').on("change", previewImages);
</script>
jQuery : Selector by ID หรือ by Class หรือ by Name

Post by Goborijung at 2020-08-13 09:48:55 | ID: 715

>> By ID
$("#btnSubmit").click(function(){ 
    ////////
});

>> By Class
$(".btnclass").click(function(){
    /////////
});

>> By Name
$(function() {
    $("input[name = 'xyz']").css("border","2px solid red");
})
jQuery : Set Background Color เมื่อ Checkbox

Post by Goborijung at 2020-06-05 11:43:16 | ID: 600

<table class="table table-striped" border='1'> <thead> <tr> <th></th> <th>Color</th> </tr> </thead> <tbody> <tr> <td> <div class="checkbox checkbox-primary"> <input type="checkbox" name="elements_ids"> <label></label> </div> </td> <td>Blue</td> </tr> ... </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $(".table tbody tr").has(':checkbox').change(function(e){ /*alert('ee');*/ if(this.style.background == "" || this.style.background == "white") { $(this).css('background', 'red'); } else { $(this).css('background', 'white'); } }); }); </script>
jQuery : Set Cell Value

Post by Goborijung at 2022-06-15 04:35:50 | ID: 1594

-- html
<tr role="row" class="palavras_row" id="rid_<?php echo $row['OID']; ?>">
        <td><?php echo $row['OID']; ?></td>
        <td><?php echo $row['UserName']; ?></td>
        <td>
            <a href="javascript:void(0);" class="edit" data-id="<?php echo $row['OID']; ?>">Edit</a>
            <a href="javascript:void(0);" class="palavras_delete" data-id="<?php echo $row['OID']; ?>">Delete</a>
        </td>
    </tr>

-- js
$("tr#rid_" + res.id).find("td").eq(1).text(res.username);
JQuery : Set Content

Post by Goborijung at 2020-05-29 13:05:29 | ID: 592

echo "<script>$(document).ready(function(){ $('#test1').html('<span class=text-danger>ไม่พบ CuttingNo นี้ในระบบ!!</span>'); });</script>";
jQuery : Set Css Color หรือ Background-Color

Post by Goborijung at 2020-08-10 14:50:49 | ID: 705

<script>
$(this).css("color","orange");
</script>
JQuery : SET Properties Value

Post by Goborijung at 2019-11-23 09:55:35 | ID: 181

<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script>
  $(document).ready(function(){
    $("#btnAdd").prop('disabled',false);
  });
</script>
jQuery : Set TR Background Toggle

Post by Goborijung at 2020-06-05 11:17:14 | ID: 599

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script>
  $(document).ready(function() {
     $('tr').click(function() {
         if (this.style.background == "" || this.style.background == "white") {
             $(this).css('background', 'red');
         } else {
             $(this).css('background', 'white');
         }
     });
  });
</script>
jQuery : Set TR Background Toggle + HTML

Post by Goborijung at 2020-06-05 11:44:36 | ID: 598

<body> <table border="1" cellspacing="1" width="100%" id="table1"> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </table> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $('tr').click(function () { if(this.style.background == "" || this.style.background =="white") { $(this).css('background', 'red'); } else { $(this).css('background', 'white'); } }); }); </script>
jQuery : Shift Select CheckBox

Post by Goborijung at 2020-08-24 15:03:58 | ID: 751

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <input type="checkbox" id="id_chk1" class="chkbox" value="1" />Check 1<br/>
    <input type="checkbox" id="id_chk2" class="chkbox" value="2" />Check 2<br/>
    <input type="checkbox" id="id_chk3" class="chkbox" value="3" />Check 3<br/>
    <input type="checkbox" id="id_chk4" class="chkbox" value="4" />Check 4<br/>
    <input type="checkbox" id="id_chk5" class="chkbox" value="5" />Check 5<br/>
    <input type="checkbox" id="id_chk6" class="chkbox" value="6" />Check 6<br/>
    <input type="checkbox" id="id_chk7" class="chkbox" value="7" />Check 7<br/>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var $chkboxes = $('.chkbox');
    var lastChecked = null;

    $chkboxes.click(function(e) {
        if (!lastChecked) {
            lastChecked = this;
            return;
        }

        if (e.shiftKey) {
            var start = $chkboxes.index(this);
            var end = $chkboxes.index(lastChecked);

            $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked', lastChecked.checked);
        }

        lastChecked = this;
    });
});
</script>
<<<123456>>>
Programming

Framework

Library

Lernnings

เครื่องมือพัฒนาเว็บ

Computer Network

Computer Security

การออกแบบและพัฒนาเว็บไซต์

Download Tools

Download SourceCode

Operating System

Webs Hacking

copyAllright © 2016 soundmk.com