JSFiddle - React, Tailwind, and code Playground

by glenderson

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<table id="example">

</table>

<table id="example1">

</table>

CSS

.buttonLike {
  border:1px solid gray;
  background-color: silver;
  color: black;
  font-family: arial;
  padding:2px;
  text-align: center;
  border-radius:2px;
  margin:2px;
}

.clickableimage:after {
  content: "Click Here";
 
}

JavaScript

var dataSet = [
  ["<img class='clickableimage' src='https://www.datatables.net/media/images/nav-dt.png' style='height:30px; width:30px'><span class='nottheimage'>Click the Image</span>", "<select><option>House<option>Car<option>Boat</select><span class='clickablespan buttonLike'>I'm a clickable span</span>", "<label><input type='checkbox' name='row_1'> Just Check Me</label>"],
  ["<img src='https://www.datatables.net/media/images/nav-e.png' style='height:30px; width:30px'>", "<select size='5'><option>Cat<option>Dog<option>Mouse<option>Lion</select>", "<label><input type='checkbox' name='row_1' checked> I am Checked</label>"],
  ["<a href='http://datatables.net' target='_blank'>Link to DataTables</a>", "<a href='http://foxnews.com' target='_blank'>Link to FoxNews</a>", "<input type='textbox' value='A TextBox'>"],
  ["<div class='clickablediv buttonLike'>I'm a clickable div</div>", "<a href='http://foxnews.com' target='_blank'>Link to FoxNews</a>", "<input type='textbox' value='A TextBox'>"]
]

$(document).ready(function() {
  $('#example').DataTable({
    data: dataSet,
    columns: [{
      title: "Image Column"
    }, {
      title: "Select Column"
    }, {
      title: "CheckBox Column"
    }]
  });

  $("#example tbody").on("click", "img, div, span", function() {
    if ($(this).hasClass("clickableimage")) {
      alert("You selected a clickable image")
    }
    else if($(this).hasClass("clickablediv")) {
      alert("You selected a clickable division")
    }
    else if($(this).hasClass("clickablespan")) {
      alert("You selected a clickable span")
    }
    else if($(this).hasClass("nottheimage")) {
      alert("Don't Click me, click the Image")
    }
  })


});