在 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">&nbsp; &nbsp; <input type="button" id="addRow" value="Add New Row" onclick="rowAdd()" /></div><div id="rows">&nbsp; &nbsp; <div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">&nbsp; &nbsp; &nbsp; &nbsp; <div class="select-date" style="margin-right:30px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 style="text-align:center;">Select Date</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="date" id="house-sitting-date" name="house_sitting_date" value="">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="yes-no">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 style="text-align:center;">Yes/No</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="nada" selected>Please choose an option</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="yes">Yes</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="no">No</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div><script>&nbsp; &nbsp; function rowAdd(event) {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("rows")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .insertAdjacentHTML('beforeend', newRow());&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; function newRow() {&nbsp; &nbsp; &nbsp; return `&nbsp; &nbsp; &nbsp; &nbsp; <div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="select-date" style="margin-right:30px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="date" id="house-sitting-date" name="house_sitting_date" value="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="yes-no">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="nada" selected>Please choose an option</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="yes">Yes</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="no">No</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; `&nbsp; &nbsp; }</script>