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

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

这个想法是点击加号（+）按钮，用newRow（）函数中的html生成一个新行HTML/PHP代码有两个输入框

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>  

函数rowAdd（）{
文件.querySelector（“.众议院参议院委员会：最后一个孩子”）.insertAdjacentHTML（'afterend'，newRow（））；
}
函数newRow（）{
返回`
`;
}  

问题陈述：

在A行和B行，我在参众两院委员会内部使用for loop，这可能是它没有以我想要的方式显示的原因。我想知道我应该在行A/B（for循环）上做些什么更改，以便以我想要的方式获得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 -->

注意：我选择的是行父div（即用作放置行的容器的div）

^^这甚至可能不是问题，我只是不喜欢以前添加元素的方式

从PHP的角度看，看起来您只是添加了输入标记，而不是添加用div包装的输入。您希望每次添加带有输入的div。对于每个循环，您的php似乎都有问题。在循环中添加包含输入的div，而不仅仅是输入

---

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

如果

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

+

请尝试以下代码

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

+
$（文档）。在（'单击'，'添加行'，函数（）上）
{    
$（'#main div'）。追加（'
');    
});

我认为它与A/B行的php代码有关，而不是我认为的javascript代码。想法？现在看看，也许你不应该把那一行加在众议院参议院委员会的最后一个孩子之后，而是加在那门课的最后一个div之后？此外，给定的JS代码如何生成包含

fr_desc

的行，而这在任何其他代码中都不存在？@NicoHaase如果您阅读了我的问题陈述。我认为，这与上面代码中A行和B行的for循环有关。@NicoHaase如果你阅读我的问题陈述的话。我认为，它与上面代码中A行和B行的for循环有关。第A行和第B行有for循环，调用all input type=“text”，这就是为什么我在div中得到所有输入类型，这不是我想要的。在../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”：[“你好，世界”，“我很好”]}。它一定回答了你的第一个问题。是的，所有JSON对象数组都有相同数量的索引！

$en_code

和

$en_desc

为空？只有当它的

（$data->code和$data->en_desc）不为null时，它才会进入
foreach循环
。通常，../feed/ptp-ess_landing_committees.json如下所示：
{“ptp_status”：null，“code”：[“XYZ”]，“en_desc”：[“Hello World”]，“fr_desc”：[“疯狂世界”]，“toggle_status”：null}
如果您还有其他问题，请告诉我。你好，乔治，我希望一切顺利。我还有一个。我想知道你是否可以看一看。
<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>