blur/unblur

by Luis Valle

HTML

<table class="table-striped">
<tr>
  <td>
    <a href="#" class="copy-btn">Swap Input</a>
  </td>
  <td class="link">
    hello
  </td>
</tr>
</table>

CSS

table {
  border-collapse:collapse;
 }
 table td {
   padding: 8px;
   border: 1px solid black;
 }

JavaScript

$(function() {
  $(document).on("click", "table.table-striped > tbody > tr > td > a.copy-btn", function(e) {
    e.preventDefault();

    const $this = $(this),
          text = $this.parent().parent().find("td.link").text();

    $this.parent().parent().find("td.link").html('<input type="text" class="form-control" value="' + $.trim(text) + '">');

    $this.parent().parent().find("td.link input").select();

	$($this).closest('tr').find('.form-control').on('blur', function () {
  	var xThis = this;
    var finText = $(xThis).val();
    $(xThis).closest('td').html(finText);
    $(xThis).off('blur');
  });
                                   

      return false;
    });
    })();