JSFiddle - React, Tailwind, and code Playground

by Reddy Uppathi

HTML

<table class="myTable">
           <tr class="table">
                <th class="table">
                    Client ID
                </th>
                <th class="table">
                    Client Name
                </th>
                <th class="table">
                    Client Address
                </th>
            </tr>
            <tr class="table">
                <td class="table">
                    Client IDxx
                </td>
                <td class="table">
                    Client Namexxx
                </td>
                <td class="table">
                    Client Addressxxxx
                </td>
            </tr>
            <tr class="table">
                <td class="table">
                    Client IDyyy
                </td>
                <td class="table">
                    Client Nameyyy
                </td>
                <td class="table">
                    Client Addressyyyy
                </td>
            </tr>
</table>

JavaScript

var obj = {
  data: [{
      name: "reddy",
      contact: "Developer",
      country: "india"
    },
    {
      name: "reddy 1",
      contact: "tester",
      country: "us"
    }
  ]
};

$(document).ready(function() {
      $.each(obj.data, function(key, value) {
        $("#contactBody").append("<tr class='table'><td contenteditable=true>" + value.name + "</td><td>" + value.contact + "</td><td>" + value.country + "</td></tr>");
      });

      //click on row
      $("tr.table").click(function() {
        var tableData = $(this).children("td").map(function() {
          return $(this).text();
        }).get();


        $('#displaySelData > span').each(function(i) {
          $(this).text(tableData[i]);
        });

      });