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

Question

I have a screenshot as shown below:

The screenshot above belongs to the following code:

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

On hitting save button, the above form (as shown in the screenshot) gets saved in the following JSON file:

$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'));
}

Problem Statement:

I am wondering what JavaScript code I need to add so that it add another select of rows . When I say Select of Rows , I meant to say the following. I added an onclick event on input tag.

Answer 1

You'll need to change some minor things, but this is the general idea:

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