Symfony / Twig的问题：尝试使用Javascript通过“添加行”按钮动态添加行

Question

毕竟，我已经尝试了一段时间，但还没有高兴。

简而言之：我们的数据库表最多有10行，每行有4列。 我可以使用一个简单的HTML表很好地显示它们。 很好

如果我全部显示它们，那么用户可以输入日期，不输入任何/全部/全部，数据库得到更新，这一切都很好。

但是许多用户只需要几行，因此我想隐藏除第一行外的所有行，并提供一个简单的“添加行”按钮。 该行应更改“显示”中的每个隐藏行： 显示：内联。

除了我不知道该怎么做！ 我尝试了各种组合。

例如，具有一个onload（）函数，该函数通过Display使其不显示以后的每一行：none。

另外：以相同的方式设置初始CSS：显示：无。

然后，使用“添加行”按钮将这些行的ID设置为“ Display：inline”。

我不确定是否值得发布代码，因为我怀疑有一个我不知道的真正简单的解决方案。

有人知道吗？

非常感谢，非常感谢！

Answer 1

使用javascript：

 $("#showNext").click(function() { var hiddenElement = $("#rows").children(".row:hidden").first(); hiddenElement.show(); }); 

 .row { width: 100%; height: 50px; background-color: #29abe1; margin: 5px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="showNext"> Show next row. </button> <div id="rows"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> 

注意： .children()仅沿DOM树向下移动一个级别。

Answer 2

通过使用javascript和ajax请求

function AddRow()
{
     //The current count of the rows (stored in html as hidden)
     var rowCount = parseInt(document.getElementById("rowCount").value);

     var NextRowIndex= rowCount+1;
    //updating the rowcount value in html page
     document.getElementById('rowCount').value = NextRowIndex;


    //Ajax function which retuns a the required row 
        $.ajax({
                //requesting to get the required row as response
                url:urlprefix+"add_row/"+NextRowIndex,
               beforeSend: function(){ enableLoader(); },
                success: function(data)
                 { 

                      $("#addFileRow"+rowCount).after("<div id='addFileRow"+NextRowIndex+"' class='sec-container' style='padding-bottom: 18px'>"+
                      "</div>");
                      disableLoader();
                      $("#addFileRow"+NextRowIndex).append(data);

                 },
                error: function(data)
                 {

                   alert(data);
                 }
        });   




    };