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

一整天，我一直在尝试做这件事，但还没有快乐

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

如果我把它们全部显示出来，那么用户就可以为它们中的任何一个/部分/全部输入日期，数据库就会得到更新，一切都很好

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

除了我不知道怎么做！我试过各种组合

e、 g.有一个onload（）函数，通过Display:none使后面的每一行不可见

另外：以相同的方式设置初始CSS:Display:none

然后让addrow按钮为要显示的行设置ID:inline

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

有人有线索吗

非常感谢，非常感谢

使用javascript：

$（“#显示下一步”）。单击（函数（）{
var hiddenElement=$（“#行”）.children（“.row:hidden”）.first（）；
hiddenElement.show（）；
});
.row{
宽度：100%；
高度：50px；
背景色：#29abe1；
保证金：5px；
显示：无；
}

显示下一行。
使用javascript：


$（“#显示下一步”）。单击（函数（）{
var hiddenElement=$（“#行”）.children（“.row:hidden”）.first（）；
hiddenElement.show（）；
});
.row{
宽度：100%；
高度：50px；
背景色：#29abe1；
保证金：5px；
显示：无；
}

显示下一行。
使用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);
                 }
        });   




    };  

函数AddRow（）
{
//行的当前计数（以隐藏形式存储在html中）
var rowCount=parseInt（document.getElementById（“rowCount”）.value）；
var NextRowIndex=行数+1；
//更新html页面中的行计数值
document.getElementById（'rowCount'）。value=NextRowIndex；
//Ajax函数，用于重新运行所需行
$.ajax({
//请求获取所需的行作为响应
url:urlprefix+“添加行/”+NextRowIndex，
beforeSend:function（）{enableLoader（）；}，
成功：功能（数据）
{ 
$（“#addFileRow”+行计数）。在（“）+
"");
禁用加载程序（）；
$（“#addFileRow”+NextRowIndex）.append（数据）；
},
错误：函数（数据）
{
警报（数据）；
}
});   
};  
使用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);
                 }
        });   




    };  

函数AddRow（）
{
//行的当前计数（以隐藏形式存储在html中）
var rowCount=parseInt（document.getElementById（“rowCount”）.value）；
var NextRowIndex=行数+1；
//更新html页面中的行计数值
document.getElementById（'rowCount'）。value=NextRowIndex；
//Ajax函数，用于重新运行所需行
$.ajax({
//请求获取所需的行作为响应
url:urlprefix+“添加行/”+NextRowIndex，
beforeSend:function（）{enableLoader（）；}，
成功：功能（数据）
{ 
$（“#addFileRow”+行计数）。在（“）+
"");
禁用加载程序（）；
$（“#addFileRow”+NextRowIndex）.append（数据）；
},
错误：函数（数据）
{
警报（数据）；
}
});   
};  
谢谢大家，我真的很感谢你们的回答！明天我将尝试实现它们。谢谢，伙计们，我真的很感谢这些答案！明天我将尝试实施它们。这太棒了，非常感谢！这也给了我下一步要研究的领域的线索。非常感谢！太好了，这很有帮助，再次感谢。我如何结束这个问题？还是我就这样把它留在这里？@EdLove你接受这个答案，然后把它留在这里。这太棒了，非常感谢！这也给了我下一步要研究的领域的线索。非常感谢！太好了，这很有帮助，再次感谢。我如何结束这个问题？还是我就这样把它留在这里？@EdLove你接受了有帮助的答案，把它留在这里。谢谢你的代码，但我想我可能已经准备好了第一个答案。不过，我还是很感激你花时间来分享它！谢谢你的代码，但我想我可能已经准备好了第一个答案。不过，我还是很感激你花时间来分享它！