Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
  <table border="0" cellspacing="5" cellpadding="0">
    <tr><th>This 1</th><th>This 2</th><th>This 3</th><th>This 4</th></tr>
    <tr id="DetailsProduit_1"><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
    <tr id="DetailsProduit_2"><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
    <tr id="DetailsProduit_3"><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
    <tr id="DetailsProduit_4"><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
​
</body>
</html>
 
$(function(){
var check_state = false;
$("tr[id^=DetailsProduit_]").click(function(event) {
    $('tr td').css({ 'background-color' : '#ffffff'});
    $('td', this).css({ 'background-color' : '#777777' });  
    var str = $(this).attr('id').substr(15);
    if (check_state === false) {
      $("#details-table_" + str).stop().slideDown("fast");
      check_state = true;
      var xmlhttp;
      if(window.XMLHttpRequest)
      {
          xmlhttp = new XMLHttpRequest();
      }
      else
      {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function()
      {
          if(this.readyState==4 && this.status==200)
          {
          document.getElementById("details-table_"+str).innerHTML=xmlhttp.responseText;
          }
      }
      xmlhttp.open("GET","../details_produit.php?num="+str,true);
      xmlhttp.send();
    }
    else
    {
      $("#details-table_" + str).stop().slideUp(1000);
      check_state = false;
    }
    event.preventDefault();
    });
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers