php - 添加嵌套表单行 PHP/Javascript

Question

概述： 我正在创建一个动态网络发票系统，大部分页面都是文本区域，我使用表格进行嵌套，因为它们会在提交表单后将数据发布到单独的表格中。When the "Nested" Add a Row is selected, it should add a row inside with form field that has details on which row and which position so it can be gathered in a for loop when it is posted.

图片：

问题：

在圆圈区域中添加一行不会将其添加到最后一行，它会添加它，就像它在图像中一样。此外，它仅适用于第一个项目，第二个添加行甚至不注册点击。
我不确定如何获取变量以在这个特定的索引大小和父索引号（位于 javascript 行 2-3）中创建表单名称 [] []

相关代码：

Javascript

$("#additemrow").click(function(){
  var currentListItem = $(this).length;
  var currentJobItem = $(this).parents('#items').index('#items');
  currentListItem++;
  $("#listitem:last").after(/*Blank Form Row*/);
  bind();
})

PHP

<table id="items">
  <tr class="item-row"><td>/*form elements*/</td></tr>
  <tr class="list-row">
   <td colspan=5>
    <table class="itemlist">
     <?php
     $itemCount = 0;
     foreach($jobListItem as $items) {
      foreach($items as $item) {
       if($problem['item_id'] == $item['item_id']) { 
    ?>
    <tr id="listitem">
     <td class="list-item">
       <div class="delete-wpr">
         <textarea class="item" name="item[/*A PARENT ITEM NUMBER*/][<?php echo $itemCount;?>][item]"></textarea>
         <a class="deleteitem" href="javascript:;" title="Remove row">X</a>
        </div>
       </td>
      </tr>
     <?php
      }
      $itemCount++;
     }
    }
     ?>
     <tr>
     <td colspan="5"><a id="additemrow" href="javascript:;" title="Add a row">Add a row</a></td>
     </tr>
    </table>
    //NEXT ITEMLIST GOES HERE
   </table>

编辑： Foreach 循环仅用于从数组中获取变量。

如果您需要更多详细信息或代码位，请告诉我，因为我不确定我是否提供了足够的信息。

score 1 · Accepted Answer

关于您的行在顶部插入的问题：

就像 Bertrand Lefort 已经说过的那样：在 JQuery 中，您可以通过调用将节点附加到另一个（父）节点的末尾parent_node.append(child_node)（更多信息here）
another_element.before(element)您还可以通过调用/another_element.after(element)或（注意反向语法！）element.insertBefore(another_element)/在另一个元素之前/之后添加元素element.insertAfter(another_element)

关于只有第一个“添加行”注册点击的问题：

您正在选择id。Id 是（或应该是）唯一的，因此当您调用$("#additemrow").click(function(){ ... })onClick 函数时，它只会附加到与给定 id 匹配的第一个元素（据我所知）。
如果您想将相同的 onClick 功能附加到多个元素，请class改用。但是，如果这样做，您必须确保插入相对于单击元素的新元素（例如，通过使用.parent()或.siblings()类似函数）。

关于您的问题＃2，我真的不知道您要做什么，但这就是我注意到的：

currentListItem并且currentJobItem似乎在它们的范围内未使用，因为您将它们声明为局部变量但不使用它们
.parents('#items').index('#items')是多余的，因为.parents('#items')已经只选择了匹配的父元素'#items'。如果要获取匹配元素的索引，请使用index()（不带参数，更多请参见jquery API）

其他一些注意事项：

如果您有时间（并且需要一个干净的项目），我建议您使用 Smarty 之类的模板引擎将您的逻辑与输出分开。这提高了代码的可读性，也更容易找到/消除错误。

我希望这会有所帮助。如果您提供有关您正在尝试做什么以及您所期望的不起作用的更多信息，我将尝试提供进一步的帮助并更新我的答案。

score 0 · Accepted Answer

您可以将 id 添加到父 html 元素，然后在单击处理程序中：

$("#additemrow").click(function(){
   $("#parent").append(/*Blank Form Row*/);

})

php - 添加嵌套表单行 PHP/Javascript

2 回答 2

Related

Reference