通過CSS在表控件中添加新行
[英]add new row in table control by css
問題描述
我如何通過使用html dom / css來控制來添加新列？其余的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中執行該方法？
2 個解決方案
解決方案1
0 已采納 2015-10-30 09:18:05
<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函數，該函數將在click按鈕事件中觸發。 首先，它正在檢查隱藏值，以查看其值是否不同於初始空白值。 如果為空白，則表示未單擊該按鈕，我們將其初始化為2（第三個字段的ID），否則將從隱藏字段中獲取值。 此后，我們將修改下一個隱藏的div值以顯示它。 在我們檢查是否沒有達到迭代的極限之后。 如果不是，我們將增加temp值的值並將其設置為隱藏字段。
希望這有效，我還沒有測試過。
解決方案2
0 2015-10-30 09:25:26
這是您的完整解決方案，只需復制並粘貼到您的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>
在網格表中添加新行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.