JSFiddle - React, Tailwind, and code Playground

by Avinashullal

HTML

<!--inline header buttons--->

<div class="section2">
  <p><span class="red"><i class="fa fa-circle"></i></span>All Request</p>
</div>
<div class="pan1 responsive">
  <ul class="nav nav-pills list-inline responsive">
    <li id="edit" style="width:10%;"><a href="#"><i class="fa fa-edit icon"></i><span class="hidden-xs editbutton">Edit</span></a></li>
    <li style="width:10%;"><a href="#"><i class="fa fa-times icon"></i><span class="hidden-xs delbutton">Delete</span></a></li>
    <li style="width:11%;"><a href="#"><i class="fa fa-circle green"></i><span class="hidden-xs">Approve</span></a></li>
    <li style="width:11%;"><a href="#"><i class="fa fa-circle red"></i><span class="hidden-xs">Reject</span></a></li>
    <li style="width:13%;"><a href="#"><i class="fa fa-file-excel-o icon"></i><span class="hidden-xs">Export Excel</span></a></li>
    <li style="width:13%;"><a href="#"><i class="fa fa-refresh icon"></i><span class="hidden-xs">Refresh List</span></a></li>
  </ul>
</div>


<!---my table-->
<div class="row">
  <div class="col-md-12">
    <div class="panel-body">
      <div class="table-responsive" id="tt">
        <table class="table table-bordered table-hover tgrey" id="datatable">
          <thead>
            <tr>
              <th>
                <input type="checkbox" id="selectall">
              </th>
              <th class="editable" contenteditable="true">Report Number</th>
              <th class="editable" contenteditable="true">Report Name</th>
              <th class="editable" contenteditable="true">Requestor</th>
              <th class="editable" contenteditable="true">Department</th>
              <th class="editable" contenteditable="true">Report Deployment Date</th>
              <th class="editable" contenteditable="true">Current Status</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input type="checkbox" class="case" name="case">
              </td>
             ...

CSS

body {
  font-family: segoe UI;
  font-size: 13px;
}

ul li {
  display: inline-block;
}

table th {
  background-color: #8BC34A;
}

table td,
table th {
  border: 1px solid #ccc;
  padding: 5px 3px;
}

.selected_row {
  background-color: #3F51B5 !important;
  color: #FFFFFF;
}

JavaScript

$(function() {


  $("#selectall").change(function() {
    $('input:checkbox').prop('checked', this.checked);
    $('tr').toggleClass("selected_row", this.checked)
  });

  $('.delbutton').click(function() {
    $("table tbody .selected_row").remove();
  });

  $('.editbutton').click(function() {

    var par = $('tr.selected_row:first');
    var tdReportNum = par.children("td:nth-child(2)");
    var tdReportName = par.children("td:nth-child(3)");
    var tdRequestor = par.children("td:nth-child(4)");
    var tdDepartment = par.children("td:nth-child(5)");
    var tdDate = par.children("td:nth-child(6)");
    var tdStatus = par.children("td:nth-child(7)");


    tdReportNum.html("<input type='text' id='txt1' value='" + tdReportNum.html() + "'/>");
    tdReportName.html("<input type='text' id='txt2' value='" + tdReportName.html() + "'/>");
    tdRequestor.html("<input type='text' id='txt3' value='" + tdRequestor.html() + "'/>");
    tdDepartment.html("<input type='text' id='txt4' value='" + tdDepartment.html() + "'/>");
    tdDate.html("<input type='text' id='txt5' value='" + tdDate.html() + "'/>");
    tdStatus.html("<input type='text' id='txt6' value='" + tdStatus.html() + "'/>");
  });

  $('table tbody :checkbox').change(function(event) {
    $(this).closest('tr').toggleClass("selected_row", this.checked);
  });
  $('table tbody tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
    $("input[type='checkbox']").not('#check_all').change(function(e) {
      if ($(this).is(":checked")) {
        $(this).closest('tr').addClass("selected_row");
      } else {
        $(this).closest('tr').removeClass("selected_row");
      }
    });
  });

});