在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>