亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Javascript 中單擊按鈕時添加/刪除一行

在 Javascript 中單擊按鈕時添加/刪除一行

PHP
瀟湘沐 2022-06-17 14:48:42
我有一個截圖,如下所示:上面的截圖屬于以下代碼:    <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 事件。
查看完整描述

1 回答

?
溫溫醬

TA貢獻1752條經驗 獲得超4個贊

你需要改變一些小事情,但這是一般的想法:


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


查看完整回答
反對 回復 2022-06-17
  • 1 回答
  • 0 關注
  • 196 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號