2.header中添加js代码

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

WBOY
リリース: 2016-05-16 17:29:09
オリジナル
1280 人が閲覧しました

次の 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 = データ;
}
}









アニメーション生成表格

















ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート