Блог

Главная - Вопросы по программированию - Как я могу добавить столбец кнопки удаления к каждой строке таблицы

Как я могу добавить столбец кнопки удаления к каждой строке таблицы

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть таблица с интерактивной строкой. И строка будет скопирована из одной таблицы в другую при нажатии на строку таблицы.

Когда строка копируется, я хочу прикрепить дополнительный столбец для кнопки удаления.

Я попробовал cloned.appendChild(<кнопка …>), но повсюду были красные линии..

Как я могу это сделать?

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

Комментарии:

1. добавьте также структуру таблицы. как вы добавили

2. Вы поместили текст <button …> внутри строки? Вот так: cloned.appendChild("<button ...>")

3. @ILikeToBeHelpful это создало бы недопустимый HTML

4. Извините, у меня нет большого опыта работы с этой функцией, просто знал, что другие функции используют строку. 🙂

Ответ №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>