学生情報管理システムを実装するためのJavaScript+HTML
1. はじめにすべての学生オブジェクトの情報を格納するために配列が使用され、双方向の更新が実装されています。最初は（配列内のオブジェクト情報が「インターフェイスを埋める」）、その後のインターフェイス操作によって、配列内のオブジェクトの情報（数量とデータ ドメイン情報自体）を更新できます。 利点:多くの詳細は JQuery コードによってより適切に処理されます。 HTML5 のパターン + 正規表現を使用して、フォーム検証と対応するプロンプトを実装します。 デメリット:学生オブジェクトを削除するバックグラウンド コードの処理効率が低い (「偽の」削除: 学生オブジェクト インデックスの位置の移動 + 配列の長さの変更)。 CSS 部分 - インターフェースのスケーリングに問題があります。 (フロントエンドについては計画していない/今のところ変更するのが面倒です)。 。 一部のコードは、再利用の目的を達成するためにより適切に処理できるため、処理されません。 2. レンダリング
3. コード執筆過程で改善前のコードを削除していないため、コードが少し長く見える（コードを書く思考過程が残っている） コメントされたコードと不要なコンテンツを削除します。コードは長すぎません。 HTML:
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>学生情報管理システム</title>
<script src="../../../JQuery/JQuery.js"></script>
<link rel="スタイルシート" href="../studentInformationManagementSystemCss/studentInformationManagementSystem.css" rel="外部 nofollow" >
<script src="../studentInformationManagementSystemJs/studentInformationManagementSystem.js"></script>
</head>
<本文>
<div>
<ヘッダー>
<hr/>
<h1>学生情報管理システム</h1>
<hr/>
</ヘッダー>
<メイン>
<div>
<div id="adbt">
<button class="gre" id="add">追加</button>
<button class="red" id="delete">削除</button>
</div>
<テーブル>
<t本文>
<tr id="thead">
<td><入力タイプ="チェックボックス"></td>
<td>シリアル番号</td>
<td>学生番号</td>
<td>名前</td>
<td>大学</td>
<td>プロフェッショナル</td>
<td>グレード</td>
<td>クラス</td>
<td>年齢</td>
<td>操作</td>
</tr>
<!--<tr>
<td name="abc"><input type="checkbox"></td>
<td>1</td>
<td>11503080201</td>
<td>張三</td>
<td>コンピュータサイエンスとエンジニアリング学部</td>
<td>ソフトウェアエンジニアリング</td>
<td>2015</td>
<td>2</td>
<td>21</td>
<td> <a href = "＃" rel = "external nofollow" rel = "external nofollow" rel = "leatern nofollow" rel = "external nofollow" rel = "外部nofollow" rel = "external nofollow" rel = "rel =" rel = "rel =" external nofollow "real nofollow"外部nofollow rel = "外部nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" class = "check">查看</a> <a href = "lean =" lifolow "lexolow" ow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ofollow "rel =" external nofollow "rel =" external nofollow "class =" modify "> </a> </td>
</tr>
<tr>
<td><入力タイプ="チェックボックス"></td>
<td>2</td>
<td>11503080202</td>
<td>李思</td>
<td>会計学部</td>
<td>会計</td>
<td>2015</td>
<td>1</td>
<td>19</td>
<td> <a href = "＃" rel = "external nofollow" rel = "external nofollow" rel = "leatern nofollow" rel = "external nofollow" rel = "外部nofollow" rel = "external nofollow" rel = "rel =" rel = "rel =" external nofollow "real nofollow"外部nofollow rel = "外部nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" class = "check">查看</a> <a href = "lean =" lifolow "lexolow" ow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ofollow "rel =" external nofollow "rel =" external nofollow "class =" modify "> </a> </td>
</tr>
<tr>
<td><入力タイプ="チェックボックス"></td>
<td>3</td>
<td>11503080203</td>
<td>王二</td>
<td>理学部</td>
<td>数学</td>
<td>2015</td>
<td>1</td>
<td>19</td>
<td> <a href = "＃" rel = "external nofollow" rel = "external nofollow" rel = "leatern nofollow" rel = "external nofollow" rel = "外部nofollow" rel = "external nofollow" rel = "rel =" rel = "rel =" external nofollow "real nofollow"外部nofollow rel = "外部nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" class = "check">查看</a> <a href = "lean =" lifolow "lexolow" ow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ofollow "rel =" external nofollow "rel =" external nofollow "class =" modify "> </a> </td>
</tr>
<tr>
<td><入力タイプ="チェックボックス"></td>
<td>4</td>
<td>11503080204</td>
<td>張三</td>
<td>コンピュータサイエンスとエンジニアリング学部</td>
<td>ソフトウェアエンジニアリング</td>
<td>2015</td>
<td>2</td>
<td>21</td>
<td> <a href = "＃" rel = "external nofollow" rel = "external nofollow" rel = "leatern nofollow" rel = "external nofollow" rel = "外部nofollow" rel = "external nofollow" rel = "rel =" rel = "rel =" external nofollow "real nofollow"外部nofollow rel = "外部nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" class = "check">查看</a> <a href = "lean =" lifolow "lexolow" ow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ofollow "rel =" external nofollow "rel =" external nofollow "class =" modify "> </a> </td>
</tr>
<tr>
<td><入力タイプ="チェックボックス"></td>
<td>5</td>
<td>11503080205</td>
<td>李思</td>
<td>会計学部</td>
<td>会計</td>
<td>2015</td>
<td>1</td>
<td>19</td>
<td> <a href = "＃" rel = "external nofollow" rel = "external nofollow" rel = "leatern nofollow" rel = "external nofollow" rel = "外部nofollow" rel = "external nofollow" rel = "rel =" rel = "rel =" external nofollow "real nofollow"外部nofollow rel = "外部nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" class = "check">查看</a> <a href = "lean =" lifolow "lexolow" ow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ofollow "rel =" external nofollow "rel =" external nofollow "class =" modify "> </a> </td>
</tr>
<tr>
<td><入力タイプ="チェックボックス"></td>
<td>6</td>
<td>11503080206</td>
<td>王二</td>
<td>理学部</td>
<td>数学</td>
<td>2015</td>
<td>1</td>
<td>19</td>
<td> <a href = "＃" rel = "external nofollow" rel = "external nofollow" rel = "leatern nofollow" rel = "external nofollow" rel = "外部nofollow" rel = "external nofollow" rel = "rel =" rel = "rel =" external nofollow "real nofollow"外部nofollow rel = "外部nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" class = "check">查看</a> <a href = "lean =" lifolow "lexolow" ow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ofollow "rel =" external nofollow "rel =" external nofollow "class =" modify "> </a> </td>
</tr>
<tr>
<td><入力タイプ="チェックボックス"></td>
<td>7</td>
<td>11503080207</td>
<td>張三</td>
<td>コンピュータサイエンスとエンジニアリング学部</td>
<td>ソフトウェアエンジニアリング</td>
<td>2015</td>
<td>2</td>
<td>21</td>
<td> <a href = "＃" rel = "external nofollow" rel = "external nofollow" rel = "leatern nofollow" rel = "external nofollow" rel = "外部nofollow" rel = "external nofollow" rel = "rel =" rel = "rel =" external nofollow "real nofollow"外部nofollow rel = "外部nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" class = "check">查看</a> <a href = "lean =" lifolow "lexolow" ow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ofollow "rel =" external nofollow "rel =" external nofollow "class =" modify "> </a> </td>
</tr>
<tr>
<td><入力タイプ="チェックボックス"></td>
<td>8</td>
<td>11503080208</td>
<td>李思</td>
<td>会計学部</td>
<td>会計</td>
<td>2015</td>
<td>1</td>
<td>19</td>
<td> <a href = "＃" rel = "external nofollow" rel = "external nofollow" rel = "leatern nofollow" rel = "external nofollow" rel = "外部nofollow" rel = "external nofollow" rel = "rel =" rel = "rel =" external nofollow "real nofollow"外部nofollow rel = "外部nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" class = "check">查看</a> <a href = "lean =" lifolow "lexolow" ow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ofollow "rel =" external nofollow "rel =" external nofollow "class =" modify "> </a> </td>
</tr>
<tr>
<td><入力タイプ="チェックボックス"></td>
<td>9</td>
<td>11503080209</td>
<td>王二</td>
<td>理学部</td>
<td>数学</td>
<td>2015</td>
<td>1</td>
<td>19</td>
<td> <a href = "＃" rel = "external nofollow" rel = "external nofollow" rel = "leatern nofollow" rel = "external nofollow" rel = "外部nofollow" rel = "external nofollow" rel = "rel =" rel = "rel =" external nofollow "real nofollow"外部nofollow rel = "外部nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" class = "check">查看</a> <a href = "lean =" lifolow "lexolow" ow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ofollow "rel =" external nofollow "rel =" external nofollow "class =" modify "> </a> </td>
</tr>
<tr>
<td><入力タイプ="チェックボックス"></td>
<td>10</td>
<td>11503080210</td>
<td>張三</td>
<td>コンピュータサイエンスとエンジニアリング学部</td>
<td>ソフトウェアエンジニアリング</td>
<td>2015</td>
<td>2</td>
<td>21</td>
<td> <a href = "＃" rel = "external nofollow" rel = "external nofollow" rel = "leatern nofollow" rel = "external nofollow" rel = "外部nofollow" rel = "external nofollow" rel = "rel =" rel = "rel =" external nofollow "real nofollow"外部nofollow rel = "外部nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" class = "check">查看</a> <a href = "lean =" lifolow "lexolow" ow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ofollow "rel =" external nofollow "rel =" external nofollow "class =" modify "> </a> </td>
</tr>-->
</tbody>
</テーブル>
<div id="ナビゲート">
<p>ページ <span id="pgn"></span>、合計 <span id="en"></span> エントリ (ページあたり最大 10 エントリ)</p><!--エントリ数-->
<div id="tpbt">
<button class="gre" id="lastpage">前のページ</button>
<button class="red" id="nextpage">次のページ</button>
</div>
</div>
</div>
</メイン>
</div>
<div id="sbg"></div><!--追加、削除、変更、チェック時の背景を影にする-->
<div class="achaesi" id="asi">
<!-- <フォームアクション="" メソッド="投稿">-->
<h2>生徒情報を追加する</h2>
<div class="ifm">
<div><label for="assn">学生番号</label> <input id="assn" type="text" placeholder="11503080201" required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('11桁の数字の組み合わせを入力してください')"></div>
<div><label for="asn">名前</label> <input id="asn" type="text" placeholder="Lei Jun" required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('正しい名前を入力してください')"></div>
<div><label for="asac">大学</label> <input id="asac" type="text" placeholder="Liangjiang College of Artificial Intelligence" required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('正しい大学名を入力してください')"></div>
<div><label for="asm">プロフェッショナル</label> <input id="asm" type="text" placeholder="ソフトウェア エンジニアリング" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('正しいプロフェッショナル名を入力してください')"></div>
<div><label for="asg">成績</label> <input id="asg" type="text" placeholder="2015" required="required" max="2020" maxlength="4" pattern="^[0-9]{4}$" oninvalid="setCustomValidity('正しい成績を入力してください')"></div>
<div><label for="asc">クラス</label> <input id="asc" type="text" placeholder="1" required="required" maxlength="1"></div>
<div><label for="asag">年齢</label> <input id="asag" type="number" placeholder="20" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('正しい年齢を入力してください')"></div>
</div>
<hr/>
<div class="scbt">
<button type="submit" id="submit">送信</button>
<button class="cancel">キャンセル</button>
</div>
<!-- </フォーム>-->
</div>
<div class="achaesi" id="chasi">
<!-- <フォームアクション="" メソッド="投稿">-->
<h2>生徒情報の変更</h2>
<div class="ifm">
<div><label for="chassn">学生番号</label> <input id="chassn" type="text" readonly required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('11桁の数字の組み合わせを入力してください')"></div>
<div><label for="chasn">名前</label> <input id="chasn" type="text" required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('正しい名前を入力してください')"></div>
<div><label for="chasac">大学</label> <input id="chasac" type="text" required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('正しい大学名を入力してください')"></div>
<div><label for="chasm">プロフェッショナル</label> <input id="chasm" type="text" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('正しいプロフェッショナル名を入力してください')"></div>
<div><label for="chasg">成績</label> <input id="chasg" type="text" required="required" max="2020" maxlength="4" pattern=^[0-9]{4}$" oninvalid="setCustomValidity('正しい成績を入力してください')"></div>
<div><label for="chasc">クラス</label> <input id="chasc" type="text" required="required" maxlength="1"></div>
<div><label for="chasag">年齢</label> <input id="chasag" type="text" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('正しい年齢を入力してください')"></div>
</div>
<hr/>
<div class="scbt">
<button type="submit" id="save">保存</button>
<button class="cancel">キャンセル</button>
</div>
<!-- </フォーム>-->
</div>
<div class="achaesi" id="chesi">
<h2>学生情報を見る</h2>
<div class="ifm">
<div><label for="chessn">学生番号</label> <input type="text" readonly id="chessn"></div>
<div><label for="chesn">名前</label> <input type="text" readonly id="chesn"></div>
<div><label for="chesac">大学</label> <input type="text" readonly id="chesac"></div>
<div><label for="chesm">プロフェッショナル</label> <input type="text" readonly id="chesm"></div>
<div><label for="chesg">成績</label> <input type="text" readonly id="chesg"></div>
<div><label for="chesc">クラス</label> <input type="text" readonly id="chesc"></div>
<div><label for="chesag">年齢</label> <input type="text" readonly id="chesag"></div>
</div>
<hr/>
<div class="scbt">
<button class="cancel">キャンセル</button>
</div>
</div>
</本文>
</html>
CS: ...
* {
マージン: 0;
パディング: 0;
}
{
テキスト装飾: なし;
色: 赤;
}
.sbg {
位置: 絶対;
上: 0;
幅: 100%;
高さ: 100%;
背景色: 黒;
不透明度: 0.4;
zインデックス: 1;
}
体 {
背景色: #f0ece9;
}
ヘッダー {
ディスプレイ: フレックス;
flex-flow: 行の折り返しなし;
コンテンツの両端揃え: スペースの間;
}
ヘッダー h1 {
色: #9a9897;
}
ヘッダーhr{
マージン: 20px 20px 0;
背景色: #bc9470;
境界線: 2px 実線 #bc9470;
幅: 30%;
高さ: 0;
}
メイン #adbt {
左マージン: 70px;
}
メインボタン{
マージン: 20px 5px;
幅: 85px;
高さ: 40px;
色: 白;
}
メインボタン.gre {
背景色: #5cb85c;
}
メインボタン.赤{
背景色: #d9534f;
}
メイン #ナビゲート {
パディング: 0 70px;
ディスプレイ: フレックス;
flex-flow: 行の折り返しなし;
コンテンツの両端揃え: スペースの間;
}
メイン #ナビゲート p {
上マージン: 30px;
}
テーブル {
マージン: 0 自動;
幅: 90%;
テキスト配置: 中央;
境界線の間隔: 0;
}
テーブル tbody tr:first-of-type {
背景色: #dadee1 !重要;
高さ: 60px;
}
テーブル tbody tr {
高さ: 45px;
}
テーブル tbody tr:nth-child(odd) {
背景色: #eef1f8;
}
テーブル tbody tr:nth-child(even) {
背景色: #ffffff;
}
テーブル tbody tr:not([id=thead]):hover {
カーソル: ポインタ;
背景色: #e9e9e9;
}
.achaesi {
表示: なし;
位置: 絶対;
上位: 20%
左: 34%;
背景色: 白;
zインデックス: 2;
幅: 500ピクセル;
高さ: 420px;
}
.achaesi h2 {
パディング: 5px 20px;
フォントサイズ: 大きい;
背景色: #555555;
色: 白;
}
.achaesi .ifm {
幅: 300ピクセル;
マージン: 10px 自動;
ディスプレイ: フレックス;
flex-flow: 列の折り返しなし;
}
.achaesi .ifm div {
マージン: 10px;
}
.achaesi .ifm div 入力 {
幅: 220ピクセル;
高さ: 20px;
}
.achaesi .scbt {
フロート: 右;
上マージン: 6px;
右マージン: 30px;
}
.achaesi .scbt ボタン:最初のタイプ {
幅: 85px;
高さ: 36px;
背景色: #5cb85c;
}
.achaesi .scbt ボタン:最後のタイプ {
幅: 85px;
高さ: 36px;
背景色: 白;
}
/*# ソースマッピングURL=studentInformationManagementSystem.css.map */
JS:
$(関数() {
let students = [{//初期インターフェースデータ schoolNumber: "11503080201",
名前: 「レイ・ジュン」//私のアイドル
アカデミー：「両江人工知能アカデミー」
専攻：「ソフトウェアエンジニアリング」、
学年: 2019,
クラス: 2,
年齢: 20,
}, {
学校番号: "11503080202",
名前:「張三」
アカデミー：「コンピュータ工学技術学部」
専攻：「コンピュータサイエンスとテクノロジー」
学年: 2019,
クラス: 1,
年齢: 19,
}, {
学校番号: "11503080203",
名前:「李思」
アカデミー：「会計アカデミー」、
専攻：「会計学」、
学年: 2018,
クラス: 3,
年齢: 19,
}, {
学校番号: "11503080204",
名前: 「王武」、
アカデミー：「理学部」、
専攻：「応用物理学」、
学年: 2017,
クラス: 3,
年齢: 21,
}, {
学校番号: "11503080204",
名前: 「趙 劉」、
アカデミー：「会計アカデミー」、
専攻：「金融」、
学年: 2017,
クラス: 3,
年齢: 21,
}, {
学校番号: "11503080202",
名前:「張三」
アカデミー：「コンピュータ工学技術学部」
専攻：「コンピュータサイエンスとテクノロジー」
学年: 2019,
クラス: 1,
年齢: 19,
}, {
学校番号: "11503080203",
名前:「李思」
アカデミー：「会計アカデミー」、
専攻：「会計学」、
学年: 2018,
クラス: 3,
年齢: 19,
}, {
学校番号: "11503080204",
名前: 「王武」、
アカデミー：「理学部」、
専攻：「応用物理学」、
学年: 2017,
クラス: 3,
年齢: 21,
}, {
学校番号: "11503080204",
名前: 「趙 劉」、
アカデミー：「会計アカデミー」、
専攻：「金融」、
学年: 2017,
クラス: 3,
年齢: 21,
}, {
学校番号: "11503080202",
名前:「張三」
アカデミー：「コンピュータ工学技術学部」
専攻：「コンピュータサイエンスとテクノロジー」
学年: 2019,
クラス: 1,
年齢: 19,
}, {
学校番号: "11503080203",
名前:「李思」
アカデミー：「会計アカデミー」、
専攻：「会計学」、
学年: 2018,
クラス: 3,
年齢: 19,
}, {
学校番号: "11503080204",
名前: 「王武」、
アカデミー：「理学部」、
専攻：「応用物理学」、
学年: 2017,
クラス: 3,
年齢: 21,
}, {
学校番号: "11503080204",
名前: 「趙 劉」、
アカデミー：「会計アカデミー」、
専攻：「金融」、
学年: 2017,
クラス: 3,
年齢: 21,
}];
let page = 1; // ページ番号 let no = 0; // 表示されるページ番号の最初のオブジェクトは配列内のオブジェクト番号であり、最初の添え字は 0 です
stuNumber = students.lengthとします。
for (let i = 0; i < 10; i++){//初期ページ情報表示 let student = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (i + 1) + "</td>" + "<td>" + students[i].schoolNumber + "</td>" + "<td>" + students[i].name + "</td>" + "<td>" + students[i].academy + "</td>" + "<td>" + students[i].major + "</td>" + "<td>"
+ students[i].grade + "</td>" + "<td>" + students[i].class + "</td>" + "<td>" + students[i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">表示</a> <a href=\"javascript:;\" class=\"modify\">変更</a></td>" + "</label></tr>");
$("tbody").append(学生);
}
$("tbody").trigger("create"); //trigger() メソッドは、選択された要素で指定されたイベントと、イベントのデフォルトの動作 (フォームの送信など) をトリガーします。
$("#pgn").text(ページ);
$("#en").text(stuNumber);
$("#add").click(function (){//追加ボタンをクリックすることでトリガーされるアクション$("#sbg").addClass("sbg");
$("#asi").show();
});
objKeys = ["schoolNumber", "name", "academy", "major", "grade", "class", "age"] とします。
$("#submit").click(function (){//送信ボタンをクリックすることでトリガーされるアクション let student = {};
isEmpty を false にします。
$("#asi").find("input").each(関数(インデックス、domEle) {
if (!domEle.value){//追加時にフォーム内の値が空の場合は追加されません isEmpty = true;
/*戻る;*/
}
学生[objKeys[インデックス]] = domEle.value;
});
空の場合
students[学生番号] = 学生;
スタ番号++;
$("#en").text(stuNumber);
/*$("#sbg").removeClass("sbg");
$("#asi").hide();*/
// $("tbody tr:first").siblings().remove(); //インターフェイスをクリアします let lpren = $("tbody tr").length - 1; //最後のページに残っているエントリの数;
if (no + 10 > stuNumber && lpren < 10) { //追加関数を追加します。最後のページが表示された場合は、インターフェイスを更新する必要があります。
$("tbody tr:last").after("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + lpren + 1) + "</td>" + "<td>" + student.schoolNumber + "</td>" + "<td>" + student.name + "</td>" + "<td>" + student.academy + "</td>" + "<td>" + student.major + "</td>" + "<td>"
+ student.grade + "</td>" + "<td>" + student.class + "</td>" + "<td>" + student.age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">表示</a> <a href=\"javascript:;\" class=\"modify\">変更</a></td>" + "</tr>");
/* i = 0 とします。
i < 10 && no + i < stuNumber) の場合 {
学生 = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
+ students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">表示</a> <a href=\"javascript:;\" class=\"modify\">変更</a></td>" + "</tr>");
$("tbody").append(学生);
私は++;
}*/
}
}
$("#sbg").removeClass("sbg");
$("#asi").hide();
});
$("tbody").on("click", ".check", function (){//アクションをトリガーするには、表示ボタンをクリックします$("#sbg").addClass("sbg");
$("#chesi").show();
stuIndex = $(this).parent().parent().find("td")[1].innerText - 1 とします。
// i = 0 とします。
$("#chesi").find("input").each(関数(インデックス、domEle) {
domEle.value = students[stuIndex][objKeys[index]];//index->i
});
});
数値を変更します。
/* $(".modify").click(function (){//jQuery に表示される新しく追加された要素のクリック イベントが無効です $("#sbg").addClass("sbg");
$("#chasi").show();
修正番号 = $(this).parent().parent().find("td")[1].innerText - 1;
i = 0 とします。
$("#chasi").find("input").each(関数(インデックス、domEle) {
domEle.value = students[modifyNumber][objKeys[i++]];
});
});*/
$("tbody").on("click", ".modify", function (){//変更ボタンをクリックしてアクションをトリガーすると、jQuery で新しく追加された要素の無効なクリック イベントの問題が解決されます$("#sbg").addClass("sbg");
$("#chasi").show();
修正番号 = $(this).parent().parent().find("td")[1].innerText - 1;
i = 0 とします。
$("#chasi").find("input").each(関数(インデックス、domEle) {
domEle.value = students[modifyNumber][objKeys[i++]];
});
});
$("#save").click(function (){//保存ボタンをクリックすることで実行されるアクション$("#chasi").find("input").each(function (index, domEle) {
if (domEle.値)
students[modifyNumber][objKeys[index]] = domEle.value;
});
$("tbody tr").eq(modifyNumber - no + 1).remove();
$("tbody tr").eq(modifyNumber - no).after("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (modifyNumber - no + 1) + "</td>" + "<td>" + students[modifyNumber].schoolNumber + "</td>" + "<td>" + students[modifyNumber].name + "</td>" + "<td>" + students[modifyNumber].academy + "</td>" + "<td>" + students[modifyNumber].major + "</td>" + "<td>"
+ students[modifyNumber].grade + "</td>" + "<td>" + students[modifyNumber].class + "</td>" + "<td>" + students[modifyNumber].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">表示</a> <a href=\"javascript:;\" class=\"modify\">変更</a></td>" + "</tr>");
/*$("tbody tr:first").siblings().remove();//インターフェイスをクリアfor (let i = no; i < no+10; i++){//初期ページ情報表示let student = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (i + 1) + "</td>" + "<td>" + students[i].schoolNumber + "</td>" + "<td>" + students[i].name + "</td>" + "<td>" + students[i].academy + "</td>" + "<td>" + students[i].major + "</td>" + "<td>"
+ students[i].grade + "</td>" + "<td>" + students[i].class + "</td>" + "<td>" + students[i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">表示</a> <a href=\"javascript:;\" class=\"modify\">変更</a></td>" + "</tr>");
$("tbody").append(学生);
}
$("tbody").trigger("create");*/
$("#sbg").removeClass("sbg");
$("#chasi").hide();
});
$(".cancel").click(function (){//複数のキャンセル ボタンをクリックすることでトリガーされるアクション$("#sbg").removeClass("sbg");
$(".achaesi").hide();
});
$("tbody tr td:first").click(function (){//すべて選択操作では、JQuery の暗黙的な反復処理 $("tbody tr td input").prop("checked", $("tbody tr:first td:first input").prop("checked")); を使用します。
});
$("tbody").on("click", $("tbody tr:nth-of-type(1)").siblings().find("input"), function () {
isSelectAll を true にします。
$("tbody tr:nth-of-type(1)").siblings().find("input").each(function (index, domEle) {
($(domEle).prop("checked") == false の場合)
isSelectAll = false;
});
$("tbody tr:first td:first input").prop("checked", isSelectAll);
})
更新 = (いいえ) => {
let i = 0; //情報エントリを追加するために使用される変数。
$("tbody tr:first").siblings().remove(); //インターフェイスをクリアします while (i < 10 && no + i < stuNumber) {
学生 = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
+ students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">表示</a> <a href=\"javascript:;\" class=\"modify\">変更</a></td>" + "</tr>");
$("tbody").append(学生);
私は++;
}
$("tbody").trigger("create");
}
$("#delete").click(関数() {
if (confirm("この情報を削除してもよろしいですか?")) {
let delNumber = 0; //削除された情報エントリの数;
let delIndexs = []; //情報エントリの添え字を削除します。後処理で使用され、「フォールスルー」を回避して無効な移動を引き起こします // let i = 0; //情報エントリを追加するために使用される変数。
$("tbody tr td input").each(function (index, domEle) {
if (index != 0 && $(domEle).prop("checked")){//index != 0 の場合、タイトル行が削除されないようにします delIndexs[delIndexs.length] = $(domEle).parent().next().text() - 1;
$(domEle).parent().parent().remove();
delNumber++;
}
});
(j = delIndexs.length - 1; j >= 0; j--) の場合 {
for (let k = delIndexs[j]; k < stuNumber - 1; k++) { // 非効率的なコードです。移動するオブジェクトのインデックスを多数必要とします。JS にあまり詳しくなく、効率的な解決策をまだ思いついていません。
学生[k] = 学生[k + 1];
}
}
stuNumber -= delNumber; // 基になるデータ（学生オブジェクト）を格納する配列の末尾へのポインタが「移動」します
$("#en").text(stuNumber); //エントリ数を更新します if (stuNumber == no) {
いいえ -= 10;
ページ - ;
$("#pgn").text(ページ);
}
更新(いいえ);
/* $("tbody tr:first").siblings().remove();//インターフェイスをクリア while (i < 10 && no + i < stuNumber) {
学生 = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
+ students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">表示</a> <a href=\"javascript:;\" class=\"modify\">変更</a></td>" + "</tr>");
$("tbody").append(学生);
私は++;
}
$("tbody").trigger("create");*/
$("tbody tr td:first input").prop("checked", false);
}
});
$("#nextpage").click(関数() {
if (no + 10 < stuNumber) {
いいえ += 10;
ページ++;
$("#pgn").text(ページ);
更新(いいえ);
$("tbody tr:first td:first input").prop("checked", false);
/*let i = 0; //情報エントリを追加するために使用される変数。
$("tbody tr:first").siblings().remove();//インターフェイスをクリアします while (i < 10 && no + i < stuNumber) {
学生 = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
+ students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">表示</a> <a href=\"javascript:;\" class=\"modify\">変更</a></td>" + "</tr>");
$("tbody").append(学生);
私は++;
}
$("tbody").trigger("create");*/
} それ以外 {
alert("これは最後のページです。");
}
});
$("#lastpage").click(関数() {
（いいえ - 10 >= 0）の場合{
いいえ -= 10;
ページ - ;
$("#pgn").text(ページ);
更新(いいえ);
$("tbody tr:first td:first input").prop("checked", false);
/* let i = 0; //情報エントリを追加するために使用される変数。
$("tbody tr:first").siblings().remove(); //インターフェイスをクリアします while (i < 10 && no + i < stuNumber) {
学生 = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
+学生[no + i] .grade + "</td>" + "<td>" +学生[no + i] .class + "</td>" + "<td>" + [no + i] .age + "</td>" + class = \ "Modify \"> Modify </a> </td> " +" </tr> "）;
$（ "tbody"）。append（desute）;
私は++;
}
$（ "tbody"）。トリガー（ "create"）;*/
} それ以外 {
alert（ "これはすでに最初のページです。"）;
}
});
})
4.学生情報管理システムのメインインターフェース（1）システムの主なインターフェイスを図2に示します。学生の情報を配列に保存し、各生徒がオブジェクトであることが必要です。
図1学生情報管理システムの主要なインターフェース （2）[追加]ボタンをクリックして、新しいウィンドウを表示し、生徒の基本情報を入力するときは、データが合法かどうかを確認する必要があります。新しく追加されたページを図3に示します。
図2新しいインターフェイス （3）[変更]ボタンをクリックして新しいウィンドウを表示して、現在の行の学生情報を変更します。
図3変更インターフェイス （4）[表示]ボタンをクリックして、現在の行の学生情報を表示する新しいウィンドウを表示します。この時点では、入力ボックスのコンテンツを変更することはできません。
図4ビュー （5）その他の要件
これは、JavaScript+HTML学生情報管理システムの実装についてです。 以下もご興味があるかもしれません:
|
<<: さまざまな MySQL テーブルソートルールのエラーの分析
>>: ubuntu16.04でNFSサービスを構築する方法
推薦する
MySQLクエリが遅い原因と解決策
クエリ速度が遅くなる理由は多数ありますが、最も一般的な理由は次のとおりです。 1. インデックスがな...
JavaScript 履歴オブジェクトの説明
目次1. ルートナビゲーション2. 履歴状態管理API （１）ハッシュチェンジイベント（２）ポップス...
ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明
前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...
Linux環境にJDKとTomcatをインストールする詳細な手順
目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...
Linux での syslogd および syslog.conf ファイルの解釈
1: syslog.conf の概要異なるタイプの Unix の場合、標準の UnixLog システ...
VueRouterルーティングの詳細な説明
目次vueルーター1. ルーティングの概念を理解する1.1 ルーティングとは何ですか? 1.2. バ...
MySQL で MHA アーキテクチャのデプロイメントを構築する手順
目次マハ1. MAHアーキテクチャの概要2. 適用可能なシナリオ3. MHAの動作原理4. MHAの...
Vueでクラススタイルを使用する方法の詳細
目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...
vue+tsは要素のマウスドラッグの効果を実現します
この記事の例では、要素のマウスドラッグ効果を実現するためのvue+tsの具体的なコードを参考までに共...
mysql5.7.18のインストールと初期パスワードの変更方法
CentosでのMySQLのインストールについては、以前の記事を参照してください。 Centos7....
JavaScript にはすでに Object があるのに、なぜ Map が必要なのでしょうか?
目次1. オブジェクトをマップとして扱わない1. 未定義のプロパティはプロトタイプチェーンを通じてア...
MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 5.7.17のインストールと設定方法を参考までに紹介します。具体的な内容は...
MySQL 8.0 DDLアトミック機能と実装原則
1. DDLアトミック性の概要8.0 より前は、統一されたデータ ディクショナリ dd はありません...
よく使われる3つのMySQLデータ型
MySQL のデータ フィールドのタイプを定義することは、データベースを最適化するために非常に重要で...
シンプルなウェブ計算機を実装するJavaScript
背景私は新しいプロジェクト チームに配属されたので、プロジェクトでは js を使用する必要があります...