时间戳

首页 > 解决方案 > 多个表 - 添加新行

html - 多个表 - 添加新行

问题描述

我有几个小的 PHP 表在彼此下面：

蓝色是一张桌子等等

单击带有加号的绿色按钮时，我希望能够在表格中添加新行。但是如何在表格下方检测按钮被点击，以便在该确切表格下添加新行？

我的表的代码是这样的：

<?php    
                            $result = mysqli_query($conn, "SELECT category_name FROM categories"); // using mysqli_query instead
                            while($res = mysqli_fetch_array($result)) { 

                                echo "<table id='tbl' class='col-12'><th name='category' class='open-list bg-grey txt-xl pl-3'>".$res['category_name']."</th>
                               
                                <tr class='content-div row align-items-center'>
                                    <td class='col-8'><input name='product_name' type='text' class='p-3 border-0 text-left txt-xl'></td>
                                    <td class='col-2 p-0 txt-xl'><input name='quantity' type='text' value='1' class='w-50 border-0 p-0 txt-xl'><label class='txt-xl m-0 text-left'>tk</label></td>
                                    <td class='col-2' ><input class='mr-3' type='checkbox' name='check'></td>
                                </tr>
                                
                                <tr>
                                    <td>
                                        <button type='button' class='add_another bg-success m-2 col-2 additem-btn shadow d-flex justify-content-center'><i class='txt-lg-icon bi bi-plus'></i></button>
                                    </td>
                                </tr>";
                        
                            }
                        ?>
                        </table>

到目前为止我试过这个：

$('document').ready(function() { $('.add_another').click(function() {
  $("#tbl").append('<tr><td><input name="product_name" type="text" class="pr-3 text-left txt-xl col-12 border-dark"></td><td><input class="mx-3" type="checkbox" name="check"></td></tr>');});})

它可以添加一个新行，但无论我在哪个表下单击添加按钮，它总是只在第一个表中添加一个新行。

表头（灰色背景的）来自我的 mysql 数据库，每个表头也有一个 id。所以也许有一种方法可以使用 id-s 来检测按钮被点击的位置，或者还有其他方法可以解决我的问题吗？

编辑：

我还想通过单击标题在打开和关闭表标题下的内容之间切换。

到目前为止，我已经尝试过这些：

$(".open-list" ).click(function() {$( ".content-div" ).toggle("");});

$(function() {
        $('.open-list').on("click",function() {
            $(".content-div").closest("tr").toggle("")
        });
})

他们一起打开和关闭所有这些，但我希望能够分别打开/关闭每个表格内容。

谢谢你！

标签： htmljquery

解决方案

ID 必须是唯一的

如果你想在按钮之后添加行，试试这个

$(this).closest("tr").after()

或者

$(this).closest("tbody").append()

如果在带有按钮的行之后使用

$(function() {
  $('.add_another').on("click",function() {
    $(this).closest("tr").before('<tr><td><input name="product_name" type="text" class="pr-3 text-left txt-xl col-12 border-dark"></td><td><input class="mx-3" type="checkbox" name="check"></td></tr>');
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='col-12'>
  <th name='category' class='open-list bg-grey txt-xl pl-3'>Whatever</th>

  <tr class='row align-items-center'>
    <td class='col-8'><input name='product_name' type='text' class='p-3 border-0 text-left txt-xl'></td>
    <td class='col-2 p-0 txt-xl'><input name='quantity' type='text' value='1' class='w-50 border-0 p-0 txt-xl'><label class='txt-xl m-0 text-left'>tk</label></td>
    <td class='col-2'><input class='mr-3' type='checkbox' name='check'></td>
  </tr>

  <tr>
    <td>
      <button type='button' class='add_another bg-success m-2 col-2 additem-btn shadow d-flex justify-content-center'><i class='txt-lg-icon bi bi-plus'></i>Add</button>
    </td>
  </tr>


</table>
<table class='col-12'>
  <th name='category' class='open-list bg-grey txt-xl pl-3'>Whatever</th>

  <tr class='row align-items-center'>
    <td class='col-8'><input name='product_name' type='text' class='p-3 border-0 text-left txt-xl'></td>
    <td class='col-2 p-0 txt-xl'><input name='quantity' type='text' value='1' class='w-50 border-0 p-0 txt-xl'><label class='txt-xl m-0 text-left'>tk</label></td>
    <td class='col-2'><input class='mr-3' type='checkbox' name='check'></td>
  </tr>

  <tr>
    <td>
      <button type='button' class='add_another bg-success m-2 col-2 additem-btn shadow d-flex justify-content-center'><i class='txt-lg-icon bi bi-plus'></i>Add</button>
    </td>
  </tr>


</table>

推荐阅读