我如何 append 删除按钮列到每个表行

Question

我有可点击行的表格。 并且，当单击表的行时，行将从一个表复制到另一个表。

复制行时，我想为删除按钮附加附加列。

我试过 cloned.appendChild(<button...>) 但红线到处都是..

我怎样才能做到这一点？

<script>
$(document).ready(function($) {
    $(".clickable-row").click(function() {
        var cloned = $(this).clone();
        <!--here I want to attach column to cloned-->
        $(cloned).appendTo($("#chosen"));
    });
});
</script>

将从该表中复制行：

<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>

行将被复制到此表：

<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

记得委托：

 $(function() { $(".clickable-row").on("click", function() { const $cloned = $(this).clone(); $cloned.append('<td><button type="button" class="delete">X</button></td>').appendTo("#chosen"); }); $("#chosen").on("click", ".delete", function() { $(this).closest("tr").remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>name 1</td> <td>difficulty 1</td> <td>goal 1</td> <td>recommended 1</td> <td>return 1</td> </tr> <tr class="clickable-row"> <td>name 2</td> <td>difficulty 2</td> <td>goal 2</td> <td>recommended 2</td> <td>return 2</td> </tr> <tbody> </table> </div> <hr/> <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> <th>Del</th> </tr> </thead> <tbody id="chosen"> <!--rows will be added here--> </tbody> </table>