学生情報管理システムを実装するための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サービスを構築する方法
推薦する
CSSを使用してダークモードとブライトモードを切り替える
Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリュ...
Linux netstatコマンドの詳細な説明
目次Linux netstat コマンド1. TCP接続ステータスの詳細な説明2. コマンド形式3....
7つの便利なTypeScriptの新機能
目次1. オプションの連鎖2. NULL値の結合3. 再帰型エイリアス4. アサーション署名5. P...
nginx+uwsgi で Django プロジェクトを開始するための詳細な手順
Django で Web プロジェクトを開発する場合、開発およびテストのプロセスでは Django ...
Nginx 7層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解
この記事は主に、Nginx 7 層負荷分散のいくつかのスケジューリング アルゴリズムを紹介します。こ...
postcss-pxtorem モバイル適応の実装
コマンドを実行してプラグインpostcss-pxtoremをインストールします npm インストール...
MySQLソースコマンドの使い方の紹介
目次ネット上の質問から生まれた思考MySQL ソースコマンドネット上の質問から生まれた思考今日仕事中...
Linux で MySQL スケジュール タスク バックアップ データを実装する方法
序文バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...
Linuxでホスト名を永続的に変更する方法
ホスト名を変更する場合は、以下の手順に従ってください。ホスト名の使用hostnameコマンドを使用す...
Dockerで同じIDを持つ2つのイメージを削除する
今日 Docker コンテナを作成したとき、誤ってイメージの名前を間違って入力しました。その結果、コ...
CSS3 はクールな 3D 回転遠近法効果を実現します
CSS3はクールな3D回転パースペクティブを実現します3D アニメーション効果はますます人気が高まっ...
MySql 認証に基づく vsftpd 仮想ユーザー
目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...
Vueはマーキースタイルのテキストの水平スクロールを実装します
この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...
mysql 実行プラン ID が空である (UNION キーワード) の詳細な説明
導入作業プロセス中に、遅いクエリが調整されることがあります。 MySQL SQL ステートメントのチ...
JS クロスドメイン ソリューション React 構成 リバース プロキシ
クロスドメインソリューションjsonp (get をシミュレート) CORS (クロスオリジンリソー...