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

jQuery : get row index , get column index

Post by Goborijung at 2022-06-15 03:14:54 | ID: 1593

$(document).ready(function($) {

$('td').click(function(){
   var row_index = $(this).parent().index();
   var col_index = $(this).index();
});

หรือ 

$('td').click(function(){
   var row_index = $(this).closest("tr").index();
   var col_index = $(this).index();
});

}):
jQuery : Get Value in Span

Post by Goborijung at 2020-09-29 15:30:56 | ID: 835

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<span>Click me away!</span>
<button name='btnClick' type='submit'>Click</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button[name='btnClick']").click(function(){
    var txt = $("span").text();
    alert(txt);
  });
});
</script>

</body>
</html>
JQuery : GET Width - Height Element

Post by Goborijung at 2020-08-07 15:11:41 | ID: 207

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demo</title>
  <style>
    button { font-size: 12px; margin: 2px; }
    p { width: 150px; border: 1px red solid; }
    div { color: red; font-weight: bold; }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
 
<button id="getp">Get Paragraph Width</button>
<button id="getd">Get Document Width</button>
<button id="getw">Get Window Width</button>
<div> </div>
<p>Sample paragraph to test width</p>
 
<script>
function showWidth( ele, w, h ) {
  $( "div" ).text( "The " +ele+ " is Width: " +w+"px. Height: " +h+ "px." );
}
$( "#getp" ).click(function() {
  showWidth( "paragraph", $("p").width(), $("p").height() );
});
$( "#getd" ).click(function() {
  showWidth( "document", $(document).width(), $(document).height() );
});
$("#getw").click(function() {
  showWidth( "window", $(window).width(), $(window).height() );
});
</script>
 
</body>
</html>
JQuery : Input Type Radio Change Function

Post by Goborijung at 2020-09-12 16:02:45 | ID: 182

<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script>
  $(document).ready(function(){
    $("input[type=radio]").change(function(){
	alert($(this).val());
     });
  });
</script>
jQuery : Javascript Show / Hide Password , Toggle Password

Post by Goborijung at 2021-03-16 16:34:18 | ID: 1046

>> HTML + PHP

<div class="col-xs-4"><input type='password' name='txtPassPHP' id="txtPassPHP_<?=$rs3['php_id']?>" value="<?=$rs3['php_pass']?>"/></div>
<div class="col-xs-4"><i onclick="myFunction('txtPassPHP_<?=$rs3['php_id']?>')" class='fa fa-fw fa-eye field-icon'></i></div>


>> Javascript

<script>
function myFunction(inputId) {
  var x = document.getElementById(inputId);
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>
jQuery : JQuery Radio is Checked and get Value

Post by Goborijung at 2020-08-14 14:10:18 | ID: 721

<script>
var test = $("input[type='radio']:checked").val();
alert(test);
</script>
jQuery : Jquery Update Table by PHP and Jquery (dblClick)

Post by Goborijung at 2020-06-12 16:27:04 | ID: 489

Download SourceCode : https://makitweb.com/make-live-editable-table-with-jquery-ajax/#demo1

Example : 

> PHP Table
<?php include "config.php"; ?>
<!doctype html>
<html>
  <head>
    <title>Make Live Editable Table with jQuery AJAX</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src='script.js' type='text/javascript'></script>
  </head>

  <body>

    <div class='container'>

      <table class="table table-striped" width='100%' border='0'>
        <tr>
          <th width='10%'>S.no</th>
          <th width='40%'>Username</th>
          <th width='40%'>Name</th>
        </tr>
        <?php
          $query = "SELECT * From [User] order by UserName";
          $result = sqlsrv_query($conn,$query);
          $count = 1;
          while($row = sqlsrv_fetch_array($result) ){
            $id       = $row['OID'];
            $username = $row['UserName'];
            $name     = $row['FullName'];
            ?>
            <tr>
              <td><?php echo $count; ?></td>
              <td> <div contentEditable='true' class='edit' id='UserName_<?php echo $id; ?>'> <?php echo $username; ?></div> </td>
              <td> <div contentEditable='true' class='edit' id='FullName_<?php echo $id; ?>'><?php echo $name; ?> </div> </td>
            </tr>
            <?php
            $count ++;
          }
        ?>  
      </table>

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

  </body>
</html>

>  JQuery
$(document).ready(function()
{

    //alert('ok-function');

    // Add Class
    $('.edit').click(function(){
      $(this).addClass('editMode');

    });

    // Save data
    $(".edit").focusout(function(){
      $(this).removeClass("editMode");

      var id = this.id;
      var split_id = id.split("_");
      var field_name = split_id[0];
      var edit_id = split_id[1];

      var value = $(this).text();

      console.log('id: '+id);
      console.log('splitId: '+split_id);
      console.log('splitName: '+field_name);
      console.log('ediitId: '+edit_id);
      console.log('value: '+value);

      $.ajax({
        url: 'update.php',
        type: 'post',
        data: { field:field_name, value:value, id:edit_id },
        success:function(response){
          console.log('Save successfully');               
        }
      });

    });

});

> PHP Update
<?php 

include "config.php";

$field  = $_POST['field'];
$value  = trim($_POST['value']);
$editid = $_POST['id'];

echo "<script>console.log($field);</script>";

$query = "UPDATE [User] SET ".$field."='".$value."' WHERE OID = ".$editid." ";
echo $query;
sqlsrv_query($conn,$query);

echo 1;

?>
jQuery : Loop Table Row and Columns

Post by Goborijung at 2020-08-10 10:58:21 | ID: 704

<script>
$('#myTable tr').each(function(index,tr) {
console.log(index);
console.log(tr);
var Barcode = $(this).find("td").eq(4).text();
console.log(Barcode);
});
</script>
jQuery : Plugin Ajax Editable

Post by Goborijung at 2020-06-13 10:00:55 | ID: 616

https://www.jqueryscript.net/text/AJAX-Edit-In-Place-Plugin-jQuery-jeditable.html
jQuery : Plugin Bootstrap Tree List

Post by Goborijung at 2020-06-05 16:23:24 | ID: 611

https://www.jqueryscript.net/other/tree-list-bootstrap.html
<<<123456>>>
Programming

Framework

Library

Lernnings

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

Computer Network

Computer Security

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

Download Tools

Download SourceCode

Operating System

Webs Hacking

copyAllright © 2016 soundmk.com