How can I append delete button column to each table row

user_13639667 0
Viewed 267

I have table that has clickable row. And, row will be copied from one to another table when table's row is clicked.

When the row is copied, I want to attach additional column for delete button.

I tried cloned.appendChild(<button ...>) but red lines were everywhere..

How can I do this?

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

row will be copied from this 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>

row will be copied to this 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>
html jquery javascript
1 Answers

Remember to delegate:

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

user_2957830
Related