javascript - 如何让php/json中的按钮保持在一行？

Question

正如标题所示，保存表单后我无法使按钮保持在一行中。我可以通过 JavaScript 在一行中添加一个按钮。

我有一个 php 代码，如下所示。下面的 html/php 代码的工作方式是，在添加行时，我们可以从每一行中选择日期并保存它。现在我正在尝试连续添加一个按钮。这是 script (完全是 JS)我已经使用它来连续添加一个按钮(具有任何文本)。

我现在在添加行时遇到的问题是该按钮确实显示在每一行中，但保存表单并返回后，该按钮可能从每一行中消失因为没有保存任何内容在 JSON 中。

html/php代码:

<?php
$output = array();     

问题陈述:

我现在遇到的问题是，我可以添加任意多的行，但保存表单后按钮不会保留。只有包含日期​​的行才会保留在网页上。

我想知道需要在上面的 php/javascript 代码中进行哪些更改，以便按钮在保存表单后保留。当我检查 JSON 时，那里没有保存任何内容，因此这可能是保存表单后按钮不保留的原因。

编辑 1:

在 JSON 中，它为 null {"row_delete":null}，这就是保存表单后按钮不会保留在每一行中的原因。

Answer 1

按钮未显示，因为您无法在 php 请求中获取 HTML 按钮元素值。要获取按钮值，您必须使用带有值的额外隐藏变量

<?php

            if (!empty($_POST)) {
                $output = array();     

                if (!empty($_POST['house_sitting_date'])) {
                    $output['house_sitting_date'] = $_POST['house_sitting_date'];
                }

                if (!empty($_POST['row_delete'])) {
                    $output['row_delete'] = $_POST['row_delete'];
                }

                $fp = fopen('ptp-ess_landing_house.json', 'w');
                fwrite($fp, json_encode($output));
                fclose($fp);
            }

            $data = [];
            if(file_exists('ptp-ess_landing_house.json')) {
                $data = json_decode(file_get_contents('ptp-ess_landing_house.json'));
            }

            ?><form method="post">
                <!-- Add New Row Button START -->
                <div class="plus-minus-button" style="text-align:center;">    
                    <button type="button" id="addRow" onclick="rowAdd()">+</button>
                </div>

                <!-- Add New Row Button END -->
                <div id="rows" style="display:flex; justify-content: center;"> <!-- Big div START -->

                    <!-- This is what I have tried to add a button (START) -->  
                    <!-- Remove Button START -->
                    <div class="rows-delete" style="text-align:center;">
                        <h4 style="text-align:center;">Delete Rows</h4><?php
                        if (empty($data->row_delete)) {
                            ?><div class="row-delete" style="margin-right:30px; margin-top:20px;">
                                <button type="button" />Remove</button>
                                <input type="hidden" name="row_delete[]" value="1" />
                            </div><?php
                        }
                        else {
                            foreach ($data->row_delete as $row_delete){
                                ?><div class="row-delete" style="margin-right:30px; margin-top:20px;">
                                    <button type="button">Remove</button>
                                    <input type="hidden" name="row_delete[]" value="<?php echo $row_delete;?>" />
                                </div><?php
                            }
                        }
                    ?></div>  

                    <!-- Remove Button END -->
                    <!-- This is what I have tried to add a button (END) -->    

                    <!-- Sitting Date START -->
                    <div class="sitting-days" style="text-align:center;">
                        <h4 style="text-align:center;">Select Date</h4><?php 
                        if (empty($data->house_sitting_date)) {
                            ?><!-- Select Date START -->
                            <div class="select-date" style="margin-right:30px; margin-top:20px;">
                                <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
                            </div><?php 
                        }
                        else {
                            foreach ($data->house_sitting_date as $date){ ?>
                                <!-- Select Date START -->
                                <div class="select-date" style="margin-right:30px; margin-top:20px;">
                                    <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="<?php if($date) {echo $date;}?>">
                                </div><?php
                            }
                        }
                    ?></div>  
                    <!-- Sitting Date END -->


                </div>
                <!-- Big div END -->

                <hr />
                <div style="text-align:center;">
                    <input type="submit" value="submit" />
                </div>

            </form>

            <script>
                function rowAdd(event) {
                        document.getElementById("rows")
                          .insertAdjacentHTML('beforeend', newRow());
                    }
                    function newRow() {
                var row_delete = document.querySelectorAll('input[name="row_delete[]"]');
                var row_delete_length = row_delete.length + 1;

                return `<div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
                        <div class="row-delete" style="margin-right:30px;">
                             <button type="button">Remove</button>
                             <input type="hidden" name="row_delete[]" value="` + row_delete_length + `" />
                        </div>
                        <div class="select-date" style="margin-right:30px;">
                             <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
                        </div>
                </div>`;
            }
            </script>

注意:未提供删除原始代码，我认为您有足够的能力来做到这一点