I have a button, when i click it, i transform its sibling into an input containing the text that it once held.
This works fine.
However, upon deselection of the input, I require it to go back to being text again, but the issue is, the const variable is being overwritten somehow?
Anyway, here is my current HTML and JS:
$(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="${text}">`);
$this.parent().parent().find("td.link input").select();
if ($this.parent().parent().find("td.link input").blur()) {
$this.parent().parent().find("td.link").html(text);
}
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th class="title">link name</th>
<th class="title">Platform</th>
<th class="title">Link</th>
</tr>
</thead>
<tbody>
<tr>
<th class="body-text" scope="row">1</th>
<td class="body-text">Mark</td>
<td class="body-text link">Otto</td>
<td class="body-text"><a href="#" class="copy-btn">Copy</a>
</td>
<td class="body-text"><a href="#" class="more-btn">More</a>
</td>
</tr>
<tr>
<th class="body-text" scope="row">1</th>
<td class="body-text">Otto</td>
<td class="body-text link">Mark</td>
<td class="body-text"><a href="#" class="copy-btn">Copy</a>
</td>
<td class="body-text"><a href="#" class="more-btn">More</a>
</td>
</tr>
</tbody>
</table>
Aucun commentaire:
Enregistrer un commentaire