如何在php中单击按钮逐行添加新的div？答案

【问题标题】：How to add a new div row by row on button click in php?如何在php中单击按钮逐行添加新的div？
【发布时间】：2020-01-31 21:13:55
【问题描述】：

我有一个 html/php 代码，如下所示：

想法是单击加号 (+) 按钮并生成一个新行，其中 HTML 存在于 newRow() 函数。 HTML/PHP 代码有 2 个输入框。

html/php 代码：

<?php
$output = array();     
$output['en_desc']=$_POST['en_desc'];
$output['code']=$_POST['code'];

$fp = fopen('../feeds/ptp-ess_landing_committees.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);

if(file_exists('../feeds/ptp-ess_landing_committees.json')){
    $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));
}
?>

<?php if($data) { ?>
<form method="post" id="myform" style="text-align: left;">

    <!-- Add New Row Button START -->
    <div class="plus-minus-button" style="text-align:center;">    
         <button type="button" onclick="rowAdd()">+</button>
    </div>
    <!-- Add New Row Button END -->

    <div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <!-- Big div START -->

    <!-- Code START -->  
    <?php if (empty($data->code)) { ?>
         <input type="text" name="code[]" style="margin-right:10px;" value="">
          <?php } else {  ?>
        <?php  foreach ($data->code as $code){ ?>            <!-- Line A -->
          <input type="text" name="code[]" style="margin-right:10px;" value="<?php if($code) {echo $code;}?>">
         <?php }} ?>
    <!-- Code END -->

    <!-- EN Desc START -->  
    <?php if (empty($data->en_desc)) { ?>
         <input type="text" name="en_desc[]" value="">
          <?php } else {  ?>
        <?php  foreach ($data->en_desc as $en_desc){ ?>      <!-- Line B -->
          <input type="text" name="en_desc[]" value="<?php if($en_desc) {echo $en_desc;}?>">
         <?php }} ?>
    <!-- EN Desc END -->

    </div>  <!-- Big div END -->
</form>
<?php } else {
echo 'Cannot read JSON settings file';
}
?>

这是我用来在 JavaScript 中添加 div 的 JavaScript。

 <script>       
        function rowAdd() {
          document.querySelector(".house-senate-committee:last-child").insertAdjacentHTML('afterend', newRow());
        }

        function newRow() {
              return `<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
                    <input type="text" name="code[]" style="margin-right:10px;" value="">   
                    <input type="text" name="en_desc[]" value="">
              </div>`;

         }  
</script>

问题陈述：

在 Line A 和 Line B，我在 div.house 内使用 for 循环 -senate-committee 所以这可能是它没有以我想要的方式显示的原因。我想知道我应该在 Line A/B (for loop) 处进行哪些更改，以便能够以我想要的方式获得 DOM。

上面的 javascript 代码显示了内容，但它没有像这样逐行添加 div 元素：

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    <input type="text" name="code[]" style="margin-right:10px;" value="ABC">
    <input type="text" name="en_desc[]" value="DEF">
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    <input type="text" name="code[]" style="margin-right:10px;" value="QWE">
     <input type="text" name="en_desc[]" value="RTY">
</div>

它以以下方式添加（这不是我想要的）：

<div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <!-- Big div START -->
    <input type="text" name="code[]" style="margin-right:10px;" value="ABC">
    <input type="text" name="code[]" style="margin-right:10px;" value="QWE">

    <input type="text" name="en_desc[]" value="DEF">
    <input type="text" name="en_desc[]" value="RTY">
</div>                                                                           <!-- Big div END -->

【问题讨论】：

也许您不应该在house-senate-committee 的最后一个孩子之后添加该行，而是在该类的最后一个div 之后添加该行？此外，给定的 JS 代码如何生成包含 fr_desc 的行，而这在任何其他代码中都不存在？
@NicoHaase 如果您阅读了我的问题陈述。我认为，它必须与上面代码中 Line A 和 Line B 处的 for 循环有关。
@NicoHaase 如果您阅读了我的问题陈述。我认为，它必须与上面代码中 A 行和 B 行的 for 循环有关。 A 行和 B 行有 for 循环，调用所有 input type ="text" 所以这就是为什么我在 div 中获取所有输入类型的原因，这不是我想要的方式。

标签： php json for-loop input

【解决方案1】：

如果$data 为空，您只需打印一个带有空输入的 div。如果$data 有数据，您必须遍历数据，为每个条目打印一个 div 并用相应的值填充输入。

这样的事情应该可以工作：

<?php
$output = array();     
$output['en_desc']=$_POST['en_desc'];
$output['code']=$_POST['code'];

$fp = fopen('../feeds/ptp-ess_landing_committees.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);

if(file_exists('../feeds/ptp-ess_landing_committees.json')){
    $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));
}
?>

<?php if($data) { ?>
<form method="post" id="myform" style="text-align: left;">

    <!-- Add New Row Button START -->
    <div class="plus-minus-button" style="text-align:center;">    
         <button type="button" onclick="rowAdd()">+</button>
    </div>
    <!-- Add New Row Button END -->

<?php if(empty($data->code)){ ?>

    <div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <!-- Big div START -->
         <input type="text" name="code[]" style="margin-right:10px;" value="">
         <input type="text" name="en_desc[]" value="">
    </div>

<?php }else { ?>

<?php foreach($data->code as $key=>$value){ ?>


    <div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <!-- Big div START -->

         <input type="text" name="code[]" style="margin-right:10px;" value="<?=$data->code[$key]?>">
         <input type="text" name="en_desc[]" value="<?=$data->en_desc[$key]?>">


    </div>  <!-- Big div END -->

    <?php 
        } 
      }
    ?>

</form>
<?php } else {
echo 'Cannot read JSON settings file';
}
?>

【讨论】：

在 ../feeds/ptp-ess_landing_committees.json 里面，我有这个 {"code": null,"en_desc": null} 目前。当 ../feeds/ptp-ess_landing_committees.json 里面有东西时，它看起来像这样 {"code": ["abc"],"en_desc":["hello world" ]}。当内容较多时，看起来像这样{"code": ["abc", "def"],"en_desc":["hello world", "I am good"]}。它一定回答了你的第一个问题。是的，所有 JSON 对象数组都有相同数量的索引。
快速提问： 你为什么使用 !empty 代替 $en_code 和 $en_desc ？只有当它的($data->code and $data->en_desc) 不为空时，它才会进入foreach loop。
一般，../feeds/ptp-ess_landing_committees.json 看起来像这样：{ "ptp_status": null, "code": ["XYZ"], "en_desc": ["Hello World "], "fr_desc": ["Crazy World"], "toggle_status": null }
如果您有任何其他问题，请告诉我。
嗨，乔治，我希望一切都好。我还有一个question。我想知道你是否可以看看。

【解决方案2】：


/**
 * @param {String} HTML representing a single element
 * @return {Element}
 */
function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}

function rowAdd() {
    document.querySelector("#house-senate-committee-parent-div").appendChild(htmlToElement(newRow)));
}

请注意，我正在选择行父 div（即您用作容器来放入行的 div）

^^这甚至可能不是我不喜欢之前添加元素的问题。

在 PHP 方面，看起来你只是添加了输入标签，而不是添加用 div 包装的输入。您希望每次都添加带有输入的 div。对于每个循环，您的 php 看起来肯定是一个问题。在循环中添加带有输入的 div，而不仅仅是输入

^看看你是如何将所有输入标签添加到一个 div 而不是每次在循环中创建一个单独的 div 的？

【讨论】：

我认为这与 A/B 行的 php 代码有关，而不是我认为的 javascript 代码。想法？
现在看看

【解决方案3】：

请尝试以下代码

<div class="plus-minus-button" style="text-align:center;">    
         <button type="button" id="addrow">+</button>
</div> 

<div id="main-div" style="text-align:center; margin-top:15px;">
</div>

<script>
     $(document).on('click','#addrow',function()
     {    
          $('#main-div').append('<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
              <input type="text" name="code[]" style="margin-right:10px;" value="">   
              <input type="text" name="en_desc[]" value="">
          </div>');    
     });
</script>

【讨论】：