ホームページ > 記事 > ウェブフロントエンド > js は指定された行数を持つテーブルを動的に生成します_javascript スキル

js は指定された行数を持つテーブルを動的に生成します_javascript スキル

WBOYオリジナル: 2016-05-16 17:29:091244ブラウズ

次の js 実装を使用して、ユーザーが必要とする行数を含むテーブルを生成できます。
1. まず、本文に次のコードを入力して、ユーザーが入力した行の値を取得します

コードをコピーしますコードは次のとおりです:

< /br>

>

< ;/div>

効果は次のとおりです。 >

2.ヘッダーに js コードを追加します

js は指定された行数を持つテーブルを動的に生成します_javascript スキル

コードをコピーします

コードは次のとおりです: <script> </span>function table() { </div>if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search ("^[0-9]* $") == -1) { <div class="codebody" id="code50084">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 = " <tr>" <td > " <br>"<td>zhuzhu</td>" <br>"<td >dudu" <br>"</tr>" ; <br>for (var i = 1; i データ = "<td>" <br>データ = " <td><input name='ColdDay" i "' type ='text' class='input'></td>"; <br>data = "<td><input name=' ColdCureMethod" i "' type='text' class='input'&gt ;</td>"; <br>data = "</tr>"; <BR>} <BR>data = "</ table>"; <br>document.getElementById("div1").style.display = "block"; <br>document.getElementById("table1").innerHTML = data; <br>} <br>} <br></script>

生成効果は次のとおりです:

3. すべてのコードは次のとおりです:

コードをコピーします js は指定された行数を持つテーブルを動的に生成します_javascript スキル

コードは次のとおりです:

 
<%@ 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 = "

input id="Cold" type="text" class="input" size="10" name="Num"/>row
私たちは	ズズ	ドゥドゥ
" 私は「

";
document.getElementById("div1").style.display = "ブロック";
document.getElementById("table1").innerHTML = データ;
}
}

アニメーション生成表格
行

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Javascriptでフラッシュセール、共同購入、カウントダウン表示記録共有を実装_JavaScriptスキル次の記事：Javascriptでフラッシュセール、共同購入、カウントダウン表示記録共有を実装_JavaScriptスキル

続きを見る

js は指定された行数を持つテーブルを動的に生成します_javascript スキル

関連記事