JSFiddle - React, Tailwind, and code Playground

by jordan_josh3184

HTML

<html>
<head>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

 <script type="text/javascript" src="script.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
</head>
<body>
<button onclick="saveDatatoBackEnd()">save</button>
<table id="example" class="display" width="100%"></table>
</body>

JavaScript 1.7

var dataSet = [
    [ "1","Tiger Nixon", "System Architect", "Edinburgh","$320,800" ],
      [ "2","Unity Butler", "Marketing Designer", "$85,675" ]
];
 
function prepareEditableOrder(data, type, row, meta){
	 return '<input class="form-control" id="'+row.Id+'" type="text"  value = ' + data + ' >';
} 
$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Id",},
            { title: "Name" ,render:prepareEditableOrder},
            { title: "Position" },
            { title: "Nested Data Table" }
        ]
    } );
    $('#example tbody').on( 'click', 'td', function () {
    var table = $(this).closest('table').DataTable();
    table.cell(this).data("new");
    // note - call draw() to update the table's draw state with the new data
} );
   
} );

function saveDatatoBackEnd(){
//Need to send change data to server side..... 
}