javascript - 通过CSS在表控件中添加新行

Question

我如何通过使用 html dom/css 来控制添加新列？我有一个想法，但我不知道如何编写代码，例如现在我有 4 列和 20 行，我想显示 2 作为默认行, 并隐藏其余的 18. 当点击添加列按钮时，它会显示额外的 1 行(基于点击按钮的次数。

<script>
function fnUpdateColumn(value)
{
  document.mainform.submit();
}
</script>
<form name="mainform" action="test.jsp" method="post">
<tr><td>NAME</td><td>DOB</td><td>GENDER</td><td>AGE</td></tr>
<%for(int i =0;i<20;i++){ %>
<tr>
    <%for(int j =0;j<4;j++){ %>
        <td><input  type="text"name="<%=j%>_NAME_<%=i %>"></td>
    <%}%>
</tr>
<%}%>
<input type="button" value="Add Column" onclick="fnUpdateColumn('addColumn');"> 
</form>

我的输出是这样的 我如何执行 test.jsp 中的方法？

Answer 1

<form name="mainform" action="test.jsp" method="post">
<input type="hidden" id="temp"/>
<tr><td>NAME</td><td>DOB</td><td>GENDER</td><td>AGE</td></tr>
<%for(int i =0;i<20;i++){
if (i<2){ %>
<tr>
<td><input  type="text"name="NAME_<%=i %>"></td>
</tr>
<%} else {%>
<div id="row_<%=i%>" style="display:none;">
<td><input  type="text"name="NAME_<%=i %>"></td>
</div>
<%}%>
<%}%>
<input type="button" value="Add Column" onclick="showRow();"> 
</form>

<script>
function showRow() {
var temp;    
if (document.getElementById("temp").value == "") {
temp = 2;
} else {
temp = document.getElementById("temp").value;
}
document.getElementById("row_"+temp).style.display = "inline-block";
if (temp<20) {
document.getElementById("temp").value = temp+1;
}
}
</script>

这是您可以如何继续的示例:

1) 做一个隐藏的输入来保存你当前的隐藏行，首先它被初始化为一个空白值。

2) 遍历行，如果当前行小于 2，这意味着这些是要显示的前两行，否则接下来的行将放置在隐藏的 div 中。

3) 创建一个 javascript 函数，该函数将在单击按钮事件时触发。首先，它检查隐藏值以查看它是否具有与初始空白值不同的值。如果它是空白的，这意味着按钮没有被点击，我们用 2(第三个字段的 id)初始化它，否则我们从隐藏字段中获取值。在此之后，我们正在修改下一个隐藏的 div 值以显示它。在我们检查是否未达到迭代限制之后。如果不是，我们将增加临时值的值并将其设置为隐藏字段。

希望这能奏效，我还没有测试过。