JSFiddle - React, Tailwind, and code Playground

by isogunro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<table id='Prioritize'>
  <thead>
    <th>Priority Number</th>
    <th>Title</th>
    <th>Project Name</th>
    <th>Project Number</th>
  </thead>
  <tbody>
    <tr><td><input type='text' name='rowID-1' id='rowID-1' value=5></td><td>dIT</td><td>DProject Smart</td><td>xit-34-xx</td></tr>
    <tr><td><input type='text' name='rowID-2' id='rowID-2' value=4></td><td>aIT</td><td>AProject Smart</td><td>ait-34-xx</td></tr>
    <tr><td><input type='text' name='rowID-3' id='rowID-3' value=3></td><td>IT</td><td>EProject Smart</td><td>it-34-xx</td></tr>
    <tr><td><input type='text' name='rowID-4' id='rowID-4' value=7></td><td>gIT</td><td>BProject Smart</td><td>fit-34-xx</td></tr>
    <tr><td><input type='text' name='rowID-5' id='rowID-5' value=6></td><td>kIT</td><td>CProject Smart</td><td>tit-34-xx</td></tr>
    <tr><td><input type='text' name='rowID-6' id='rowID-6' value=2></td><td>cIT</td><td>FProject Smart</td><td>uit-34-xx</td></tr>    
  </tbody>
</table>

JavaScript

$(document).ready(function() {
    var table = $('#Prioritize').DataTable();
 
    $('button').click( function() {
        var data = table.$('input, select').serialize();
        alert(
            "The following data would have been submitted to the server: \n\n"+
            data.substr( 0, 120 )+'...'
        );
        return false;
    } );
} );

$('#rowID-*').change(function () {
    alert($('#rowID-*').val());    
});