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

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

javascript java css jsp

Javascript 通过css在表控件中添加新行,javascript,java,css,jsp,Javascript,Java,Css,Jsp,如何使用html dom/css来控制添加新列？我有一个想法，但我不知道如何编写代码，例如，现在我有4列20行，我想显示2行作为默认行，并隐藏其余18行。单击“添加列”按钮时，它将显示额外的1行（基于按钮被单击的次数） <script> function fnUpdateColumn(value) { document.mainform.submit(); } </script> <form name="mainform" action="test.jsp" m

如何使用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>


函数fnUpdateColumn（值）
{
document.mainform.submit（）；
}
命名性别

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


<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>

命名性别
函数showRow（）{
无功温度；
if（document.getElementById（“temp”）.value==“”）{
温度=2；
}否则{
temp=document.getElementById（“temp”）值；
}
document.getElementById（“行”+temp）.style.display=“内联块”；
如果（temp这里是您的完整解决方案，只需复制并粘贴到您的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>


在此处插入标题
你好
命名性别
$（文档）.ready（函数（）{
var nextShowValue=2；
$（“#添加新记录”）。单击（函数（）{
$（“#”+nextShowValue+“#行”）.show（）；
如果（下一个显示值<21）{
nextShowValue++；
}否则{
警报（'没有更多可用行'）
}
});
});
20行后的最大值仅为20Heyt，您的意思是当单击“添加列”按钮时，一个新的“行”可见？请使用适当的术语，而不是单词Column使用Row word，这样所有人都很容易理解。耶…从屏幕设计中可以看到当前有4行，如何显示“隐藏”呢单击“添加列”时，将行设置为“可见”。我不知道如何将行设置为“隐藏”。。