having trouble copying row to another

Question

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>

Answer 1

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>

Answer 2

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>