js動態產生指定行數的表格_javascript技巧
- WBOY原創
- 2016-05-16 17:29:091244瀏覽
下面用js實作可以產生使用者所需行數的表格。
1.先在body中填入下列程式碼，取得使用者填入的行數值
複製程式碼 程式碼如下:
| 動態產生表格 | 行 |
效果如下圖：
2.header中加入js程式碼
複製🎜>複製程式碼 程式碼如下:
<script> <BR>function table() { <BR>if (document.getElementById("Num").value "" || document.getElementById("Num").value.search("^[0-9]*$") == -1) { <BR>document.getElementById("errmsg1").style.display = "block";//判斷Num是否為空或不是數字提示錯誤<BR>document.getElementById("errmsg1").innerHTML = "提示訊息：行數為空或不是數字！"; <BR>} <BR>else { <BR>document.getElementById("errmsg1").style.display = "none";//隱藏提示訊息<BR>var Num = parseInt(document.getElementById("Num").value); //取得行數<BR>var flag = true; <BR>var data = ""; <BR>data = " <table >"; <BR>data = " <tr>" <BR>"<td >we are " <BR>"<td >zhuzhu" <BR>"<td >dudu" <BR>"" ; <BR>for (var i = 1 ; i <= Num; i ) { <BR>data = "<tr >"; <BR>data = "<td>" i ""; <BR>data = "<td><input name ='ColdDay" i "' type='text' class='input'>"; <BR>data = "<td><input name='ColdCureMethod" i "' type='text' class= 'input'>"; <BR>data = ""; <BR>} <BR>data = ""; <BR>document.getElementById("div1"). style.display = "block"; <BR>document.getElementById("table1").innerHTML = data; <BR>} <BR>} <BR></script>
產生效果如下：
3.所有程式碼如下
複製程式碼 程式碼：
複製程式碼 程式碼:<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
文字列パス = request.getContextPath();
StringbasePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() パス "/";
%>
<頭>
function table() {
if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]* $") == -1) {
document.getElementById("errmsg1").style.display = "block";// 判断payNum が空であるか数字でないのかを示唆する错误
document.getElementById("errmsg1 ").innerHTML = "提案情報：行数は空または数字ではありません！";
}
else {
document.getElementById("errmsg1").style.display = "none";//隐藏示唆情報
var Num = parseInt(document.getElementById("Num") 。価値）; //获取分期数
var flag = true;
var data = "";
データ = " <テーブル >";
データ = "
「
「
「
「
for (var i = 1; i data = "
データ = "
data = "
data = "
データ = "
}
data = "";
document.getElementById("div1").style.display = "ブロック";
document.getElementById("table1").innerHTML = データ;
}
}