ネイティブ JavaScript で動的テーブルを作成する (コメントが明確に記述される)

ホームページ

ウェブフロントエンド

jsチュートリアル

ネイティブ JavaScript で動的テーブルを作成する (コメントが明確に記述される)_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:06 PM

動的テーブルネイティブjs

私は最近、オライリーの本を 3 冊読みました。これらは一般的に野獣の本と呼ばれています (クラスメートの 1 人の名前が私とよく似ています、笑)。そして、多くの企業が動的フォームということで、js を使用して動的フォームを作成しようとしましたが、firibug プラグインを使用したほうが良いため、それをデバッグするために filfox ブラウザーを使用しました。やりたいことはたくさんあるので、ボタンをクリックして行を追加すると、どんどん追加されて、どんどん美しくなっていきます。誰もが一緒に学べるようにソースコードを投稿してください。JS の初心者の方は、ご容赦ください。

追記: 長い間使用していないので、なぜ上に行番号が表示されないのかわかりません。ノートはわかりやすく書かれており、みんなで一緒に学ぶことができます。

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

動的テーブル body{background-color:#9CC; text-align:center} table{ margin:10px auto;} tr th { border: 1px Solid #096 ; } td{border: 1px Solid #096;} <script type="text/javascript"> /* 関数の外でのみ宣言できます変数などは呼び出して実行する関数がないため演算メソッドを使用できません。 */ //ページをロードするとき、これは 1 回限りであるため、テーブルヘッダーに選択ボックスを配置します。 window.onload = function(){ var tab = document.getElementById ('tab'); var firsttr = document.getElementsByTagName('tr')[0]; var childtd = firsttr.childNodes; //最初の行と最初の列に選択ボックスを追加します。 var inp = document.createElement('input'); inp.type = 'checkbox'; //DOM レベル 2 イベント登録 catchEvent(inp,'click', function(){ //さまざまな状態を判定する関数を登録します if(inp.checked ==true){ allSelect(); }else{ cancelSelect(); 🎜>}); //catchEvent(inp,'click',allSelect); childtd[0].appendChild(inp); } //行を追加します //var count =0;//カウント用の列を追加します function addRow(){ //count; var tab = document.getElementById('tab'); var firsttr = document.getElementsByTagName('tr')[0]; var childtd = firsttr.childNodes; .createElement('tr'); var artd = new Array(); for(var i =0;i<childtd.length;i) 🎜 >arrtd[i] = document.createElement('td'); arrinp[i] = document.createElement('input'); if(i==0){ arrinp[i] ] .type = 'checkbox'; arrinp[i].name = 'selectbox'; }else if(i==1){ //arrinp[i] = document.createTextNode(count) ) ; arrinp[i] = document.createTextNode(''); } arrtd[i].appendChild(arrinp[i]);//入力に配列を追加する必要がある理由を考えてください。 tr.appendChild(arrtd[i]); } tab.appendChild(tr); newSort() } //削除操作 function deleteRow(){ varparentTr = new Array();//まず選択した行を配列に入れます var box = document.getElementsByName('selectbox'); var tab = document. getElementById('tab'); for(var i = 0;i<box.length;i ){ if(box[i].checked==true){ varparent = box[ i].parentNode; parentTr[i] =parent.parentNode;//これが直接内部に配置されている場合、なぜ完全に削除できないのでしょうか? ?反応が足りないからでしょうか？ //tab.removeChild(parentTr); } } for(var i = 0;i<parentTr.length;i ){ //これにより、選択されたすべての項目が削除されます if(parentTr[i]){ //ここでは、まず null 値かどうかを判断する必要があります。null でない場合は、エラーが報告されます。 tab.removeChild(parentTr[i]); } } newSort(); } //削除した場合は再ソート function newSort(){ var text = new Array(); var child_td = new Array(); var arr_tr = document.getElementsByTagName('tr'); = 1;i<arr_tr.length;i ){ child_td[i] = arr_tr[i].childNodes[1];//2 行目から始まる 2 列目のノードをすべて取得します if( child_td [i].childNodes[0]){ child_td[i].removeChild(child_td[i].childNodes[0]); } text[i] = document.createTextNode(i) ; child_td[i].appendChild(text[i]); } } //すべての操作 function allSelect(){ var box = document .getElementsByName('selectbox'); for(var i= 0;i<box.length;i ){ box[i].checked = true; //すべての選択をキャンセルします function cancelSelect(){ var box = document.getElementsByName('selectbox'); for(var i = 0;i<box.length;i ) { if(box[i].checked == true){ box[i].checked =false; } } } //イベント登録関数 関数 catchEvent(eventobj,event,eventHandler){ if(eventobj.addEventListener){ eventobj.addEventListener(event,eventHandler,false) }else if(eventobj.attachEvent){ イベント = 'on' イベント; eventobj.attachEvent(event,eventHandler) } //catchEvent(add,'click',addRow); 🎜></script>

gt;

シリアル番号

質問 1

質問 2

質問 3

声明

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

JavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグインMar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲームゲームプログラミングの「Hello World」には、JQueryバージョンがあります。ソースコード jQueryクレイジーワードコンポジションゲームこれは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。ソースコード jquery鉱山の掃引ゲーム

jQuery Parallaxチュートリアル - アニメーションヘッダーの背景Mar 08, 2025 am 12:39 AM

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。更新されたプラグインは、jQuery 1.6.4以降で動作します。ダウンロードしてください

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

Matter.jsを始めましょう：はじめにMar 08, 2025 am 12:53 AM

Matter.jsは、JavaScriptで書かれた2D Rigid Body Physics Engineです。このライブラリは、ブラウザで2D物理学を簡単にシミュレートするのに役立ちます。剛体を作成し、質量、面積、密度などの物理的特性を割り当てる機能など、多くの機能を提供します。また、重力摩擦など、さまざまな種類の衝突や力をシミュレートすることもできます。 Matter.jsは、すべての主流ブラウザをサポートしています。さらに、タッチを検出し、応答性が高いため、モバイルデバイスに適しています。これらの機能はすべて、物理ベースの2Dゲームまたはシミュレーションを簡単に作成できるため、エンジンの使用方法を学ぶために時間をかける価値があります。このチュートリアルでは、このライブラリのインストールや使用法を含むこのライブラリの基本を取り上げ、