You can use .clone() to clone your tr and then use .appendTo() to append tr to your tbody.
Demo Code :
$(document).ready(function($) {
$(".clickable-row").click(function() {
var cloned = $(this).clone() //clone tr
// $(cloned).attr('class','') //if you need to remove clickale clas from cloned tr
$(cloned).appendTo($("#chosen")) //append to chosen
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="tableFixHead">
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<td>somwhtings2</td>
<td>medium</td>
<td>soemthing2..</td>
<td>
<p style="line-height: 1; font-size: 14px;">abc</p>
</td>
<td>
<p style="line-height: 1; font-size: 14px;">xyz</p>
</td>
</tr>
<tr class="clickable-row">
<td>somwhtings</td>
<td>medium</td>
<td>soemthing..</td>
<td>
<p style="line-height: 1; font-size: 14px;">abc</p>
</td>
<td>
<p style="line-height: 1; font-size: 14px;">xyz</p>
</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody id="chosen">
<!--rows will be added here-->
</tbody>
</table>
i think you can avoid using jquery entirely.
[...document.getElementsByClassName("clickable-row")].forEach(tr => {
tr.addEventListener("click", () => {
document.getElementById("chosen").innerHTML += "<tr>" + tr.innerHTML + "</tr>";
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<td>name1</td>
<td>difficulty1</td>
<td>goal1</td>
<td>recommended1</td>
<td>return1</td>
</tr>
<tr class="clickable-row">
<td>name2</td>
<td>difficulty2</td>
<td>goal2</td>
<td>recommended2</td>
<td>return2</td>
</tr>
</tbody>
</table>
<br>
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody id="chosen">
<!--rows will be added here-->
</tbody>
</table>
I have a main table that has clickable rows and another table for adding clicked row from main table.
Somehow, I was able to add row from one to another. But row is deleted from main table and then added to another. I want the clicked row to remain in main table then copied to the other.
I searched and tried like deep copy and shallow copy something but it doesn’t work 🙁
Anyone know how to help?
Javascript:
<script>
$(document).ready(function($) {
$(".clickable-row").click(function() {
var row = document.createElement("tr");
row = Object.assign({}, $(this));
var tbody= document.getElementById("chosen");
tbody.appendChild(row[0]);
});
});
</script>
HTML for main table:
<div class="tableFixHead">
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody>
{% if quest_list %}
{% for quest in quest_list[:8] %}
<tr class="clickable-row">
<td>{{ quest.name }}</td>
<td>{{ quest.difficulty }}</td>
<td>{{ quest.goal }}</td>
<td>
{% for i in quest_map.query.filter(quest_map.quest_id == quest.id, quest_map.mod == 0).all() %}
{% for j in map_.query.filter(map_.id == i.map_id).all() %}
<p style="line-height: 1; font-size: 14px;">{{ j.name }}</p>
{% endfor %}
{% endfor %}
</td>
<td>
{% for i in quest_map.query.filter(quest_map.quest_id == quest.id, quest_map.mod == 1).all() %}
{% for j in map_.query.filter(map_.id == i.map_id).all() %}
<p style="line-height: 1; font-size: 14px;">{{ j.name }}</p>
{% endfor %}
{% endfor %}
</td>
</tr>
{% endfor %}
{% else %}
<p>error</p>
{% endif %}
</tbody>
</table>
</div>
Another table:
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody id="chosen">
<!--rows will be added here-->
</tbody>
</table>
