JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div id='datatable'></div>

<script>
function createExpand3(table){
  var table, row, cell_1,cell_2, cell_3, click_link;
  
  row = $('<tr></tr>');
  cell_1 = $('<td></td>').html('data object');
  cell_2 = $('<td></td>').html('data 2 object');
  cell_3 = $('<td></td>').html('data 3 object');
  click_link = $('<a></a>').html('clickable link');
  click_link.on('click', function(e){
    // function to show 3rd row
    alert(e);
  })
  cell_3.append(click_link);
  row.append(cell_1).append(cell_2).append(cell_3);
  table.append(row);
}
function createExpand2 (d) {
  var table, row, cell_1,cell_2, cell_3, click_link;
  table = $('<table></table>');
  row = $('<tr></tr>');
  cell_1 = $('<td></td>').html('data object');
  cell_2 = $('<td></td>').html('data 2 object');
  cell_3 = $('<td></td>').html('data 3 object');
  click_link = $('<a></a>').html('clickable link');
  click_link.on('click', function(e){
    // function to show 3rd row
    createExpand3(table);
  })
  cell_3.append(click_link);
  row.append(cell_1).append(cell_2).append(cell_3);
  table.append(row);
  console.log(table);
  $('#datatable').html('').append(table);
}

createExpand2();
</script>

CSS

td {
  border: 1px solid #ddd;
}
a { color: blue; }