Question

我正在使用PHP，jquery和AJAX创建一个多行插入表。这样，用户可以添加更多行或从表中删除行。

有人可以帮我解决如何在列中创建下拉列表的问题吗？我在表中有4列，我想要一个项目名称的下拉列表。我附上桌子的按扣。请帮帮我们，我是初学者。

    [<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
</head>
<body>
    <br/><br/>
    <div class="container">
        <br/>
        <h2 align="center">Multiple Line Insert into MySql using Ajax and jQuery in PHP</h2>
        <br/>
        <div class="table-responsive">
            <table class="table table-bordered" id="crud_table">
                <tr>
                    <th width="30%">Item Name</th>
                    <th width="10%">Item Code</th>
                    <th width="45%">Description</th>
                    <th width="10%">price</th>
                    <th width="5%"></th>
                </tr>
                <tr>
                    <td contenteditable="true" class="item_name"></td>
                    <td contenteditable="true" class="item_code"></td>
                    <td contenteditable="true" class="item_desc"></td>
                    <td contenteditable="true" class="item_price"></td>
                    <td></td>
                </tr>
            </table>
            <div align="right">
                <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
            </div>
            <div align="center">
                <button type="button" name="save" id="save" class="btn btn-info">Save</button>
            </div>
            <br>
            <div id="inserted_item_data"></div>
        </div>
    </div>


</body>
</html>

<script>
    $(document).ready(function(){
        var count =1;
        $('#add').click(function(){
            count = count + 1;
            var html_code = "<tr id='row"+count+"'>";
            html_code += "<td contenteditable='true' class='item_name'></td>";
            html_code += "<td contenteditable='true' class='item_code'></td>";
            html_code += "<td contenteditable='true' class='item_desc'></td>";
            html_code += "<td contenteditable='true' class='item_price'></td>";
            html_code += "<td><button type= 'button' name='remove' data-row='row"+count+" 'class= btn btn-danger btn-xs remove'>-</button></td>";
            html_code +="</tr>";
            $('#crud_table').append(html_code);

        });
        $(document).on('click','.remove', function(){
            var delete_row = $(this).data("row");
            $('#' + delete_row).remove();

        });
    });
</script>][1]

Answer 1

我希望你期待菜单行本身的列表项。您可以参考bootstrap drop-down类。

这就是图像，

我也附上了代码片段。尽管很少有人建议，添加jquery函数来添加/删除下拉项。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <script src="https://unpkg.com/popper.js/dist/umd/popper.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    
</head>

<body>
    <br/>
    <br/>
    <div class="container">
        <br/>
        <h2 align="center">Multiple Line Insert into MySql using Ajax and jQuery in PHP</h2>
        <br/>
        <div class="table-responsive">
            <table class="table table-bordered" id="crud_table">
                <tr>
                    <th width="30%">
                    <!-- place this div where ever you want it to be-->
                        <div class="dropdown show">
                            <button class="btn bg-white dropdown-toggle" href="#" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Item Name
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                  </div>
                            </div>
                            </th>
                    <th width="10%">Item Code</th>
                    <th width="45%">Description</th>
                    <th width="10%">price</th>
                    <th width="5%"></th>
                </tr>
                <tr>
                    <td contenteditable="true" class="item_name"></td>
                    <td contenteditable="true" class="item_code"></td>
                    <td contenteditable="true" class="item_desc"></td>
                    <td contenteditable="true" class="item_price"></td>
                    <td></td>
                </tr>
            </table>
            <div align="right">
                <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
            </div>
            <div align="center">
                <button type="button" name="save" id="save" class="btn btn-info">Save</button>
            </div>
            <br>
            <div id="inserted_item_data"></div>
        </div>
    </div>
</html>

将下拉列表放在您想要的位置。

Answer 2

以下是解决方案：

https://codepen.io/creativedev/pen/xzOrWy

INSERT INTO public.orm_routes (id, host, schemes, methods, defaults, requirements, options, condition_expr, variable_pattern, staticprefix, name, position) VALUES (3, '', 'a:0:{}', 'a:0:{}', 'a:1:{s:11:"_content_id";s:33:"Klabs\ContentBundle\Entity\Post:5";}', 'a:0:{}', 'a:0:{}', '', null, '/post/5', 'Klabs\ContentBundle\Entity\Post:5', 0);

如何在包含多列的可编辑表格中创建下拉列表？

2 个答案: