在 Javascript 中单击按钮时添加/删除一行

Question

我有一个截图，如下所示：上面的截图属于以下代码：    <h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>    <div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">        <!-- Date START -->         <div class="select-date" style="margin-right:30px;">             <h4 style="text-align:center;">Select Date</h4>            <input type="date" id="house-sitting-date" name="house_sitting_date" value="<?php if($data->{" house_sitting_date "}<>''){echo $data->{"house_sitting_date "};}?>">        </div>        <!-- Date END -->        <!-- Yes/No Dropdown START -->        <div class="yes-no">            <h4 style="text-align:center;">Yes/No</h4>            <select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">                <option value="nada" <?php if($data->{"house_sitting_date_yes_no"}=="nada"){echo 'selected';} ?>>Please choose an option</option>                <option value="yes" <?php if($data->{"house_sitting_date_yes_no"}=="yes"){echo 'selected';} ?>>Yes</option>                <option value="no" <?php if($data->{"house_sitting_date_yes_no"}=="no"){echo 'selected';} ?>>No</option>            </select>        </div>        <!-- Yes/No Dropdown END -->        <!-- Add new row button START -->        <div class="add-new-row-button">            <input type="button" id="addRow" value="Add New Row" onclick="rowAdd()"/>        </div>        <!-- Add new row button END -->    </div>    <!-- Javascript Code START -->     <script>    function rowAdd() {     }    </script>   <!-- Javascript Code END --> 点击保存按钮后，上述表单（如屏幕截图所示）将保存在以下 JSON 文件中：$output['house_sitting_date']=$_POST['house_sitting_date'];$output['house_sitting_date_yes_no']=$_POST['house_sitting_date_yes_no'];if(file_exists('../feeds/ptp-ess_landing_house.json')){    $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_house.json'));}问题陈述：我想知道我需要添加什么 JavaScript 代码才能添加另一个选择行。当我说Select of Rows时，我的意思是说以下内容。我在输入标签上添加了一个 onclick 事件。

Answer 1

你需要改变一些小事情，但这是一般的想法：

<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>

<div class="add-new-row-button">

    <input type="button" id="addRow" value="Add New Row" onclick="rowAdd()" />

</div>

<div id="rows">

    <div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">

        <div class="select-date" style="margin-right:30px;">

            <h4 style="text-align:center;">Select Date</h4>

            <input type="date" id="house-sitting-date" name="house_sitting_date" value="">

        </div>

        <div class="yes-no">

            <h4 style="text-align:center;">Yes/No</h4>

            <select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">

                <option value="nada" selected>Please choose an option</option>

                <option value="yes">Yes</option>

                <option value="no">No</option>

            </select>

        </div>

    </div>

</div>

<script>

    function rowAdd(event) {

        document.getElementById("rows")

          .insertAdjacentHTML('beforeend', newRow());

    }

    

    function newRow() {

      return `

        <div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">

            <div class="select-date" style="margin-right:30px;">

                <input type="date" id="house-sitting-date" name="house_sitting_date" value="">

            </div>

            <div class="yes-no">

                <select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">

                    <option value="nada" selected>Please choose an option</option>

                    <option value="yes">Yes</option>

                    <option value="no">No</option>

                </select>

            </div>

        </div>

      `

    }

</script>