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值以显示它。在我们检查之后是否达到了迭代的极限。如果没有，我们正在递增临时值的值并将其设置为隐藏字段。

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

Answer 2

这是您的完整解决方案，只需复制并粘贴到您的JSP文件中，

注意：将jqueryXXX.js文件添加到项目中。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery/jquery-2.1.4.min.js"></script>


<body>
hello

<table>

<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>
    <% }else{ %>
<tr id="<%=i+"_row"%>" style="display:none;" >  
    <%}%>

    <%for(int j =0;j<4;j++){%>
        <td><input  type="text"name="<%=j%>_NAME_<%=i %>"></td>
     <%}%>
</tr>
<%}%>

<input type="button" id="addNewRecord" value="Add New Column"/>

</table>

<script type="text/javascript">

$(document).ready(function(){
    var nextShowValue = 2;
    $( "#addNewRecord" ).click(function() {

        $('#'+nextShowValue+'_row').show();

        if(nextShowValue < 21){
            nextShowValue++;    
        }else{
            alert('no more available rows')
        }


    });

});



</script>


</body>
</html>

通过css在表格控件中添加新行

2 个答案: