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>
<script src="//code.jquery.com/jquery.min.js"></script>
  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>test examples</title>
  
</head>
<body>
​
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="table">
          <table class="myTable table table-bordered">
            <tr>
              <td onclick:"checkClass(this)">1</td>
              <td onclick:"checkClass(this)">2</td>
              <td onclick:"checkClass(this)">3</td>
              <td onclick:"checkClass(this)">4</td>
              <td onclick:"checkClass(this)">5</td>
              <td onclick:"checkClass(this)">6</td>
              <td onclick:"checkClass(this)">7</td>
              <td onclick:"checkClass(this)">8</td>
              <td onclick:"checkClass(this)">9</td> 
              <td onclick:"checkClass(this)">10</td>
              <td onclick:"checkClass(this)">11</td>
              <td onclick:"checkClass(this)">12</td>
              <td onclick:"checkClass(this)">13</td>
              <td onclick:"checkClass(this)">14</td>
              <td onclick:"checkClass(this)">15</td>
              <td onclick:"checkClass(this)">16</td>
              <td onclick:"checkClass(this)">17</td>
              <td onclick:"checkClass(this)">18</td>
              <td onclick:"checkClass(this)">19</td>
              <td onclick:"checkClass(this)">20</td>
            </tr>
          </table>
           <hr>
          <button class="btn btn-success" onclick="cheack()">click me</button>
          
      <!-- <br><br>
           <button class="btn btn-success" >text me</button> -->
          
        </div>
      </div>
    </div>
  </div>
  
  
  
  
  
</body>
</html>
 
​
function cheack(){  
  var randNumb = (Math.floor(Math.random()*20)+1);
   var numbs = document.getElementsByTagName("tr")[0];
  var c = $(".green").index("td");
  
  for(var i=0; i<20; i++){      
//      var c = $(".green").index("td");
    if(numbs.getElementsByTagName("td")[i].innerHTML == randNumb){
        numbs.getElementsByTagName("td")[i].setAttribute("class", "green");
        console.log(c);
    }
    
      
    
  }
  for(var i=0; i<20; i++)
    {
      if(!numbs.getElementsByTagName("td")[i].getAttribute("class")) {
        numbs.getElementsByTagName("td")[i].setAttribute("class", "green");
      }
      else if(numbs.getElementsByTagName("td")[i].getAttribute("class") == "green") {
        numbs.getElementsByTagName("td")[i].setAttribute("class", "grey");
      } else {
        // do nothing.. 
      }
    }
}
​
Output

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

Dismiss x
public
Bin info
qarlsonpro
0viewers