さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <html> <head><title>表</title></head> <本文> <表の境界線="1"> <頭> <tr> <td>名</td> <td>姓</td> <td> </td> </tr> <頭> <tbodyid="tb"> <tr id="1st"> <td>张</td> <td>3</td> <td><input type="button" value="追加" onclick="add()"> <input type="button" value="Del" onclick="del(this)"></td> </tr> </tbody> </テーブル> </本文> </html> <スクリプト> 関数add(){ var trObj = document.createElement("tr"); trObj.id = 新しい日付()。getTime(); trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'> <input type='button' value='Del' onclick='del(this)'></td>"; document.getElementById("tb").appendChild(trObj); } 関数 del(obj) { var trId = obj.parentNode.parentNode.id; var trObj = document.getElementById(trId); document.getElementById("tb").removeChild(trObj); } </スクリプト> 上記のコードでは、まず本体にテーブルを構築します。後続の操作を容易にするために、テーブルに thead タグと tbody タグを追加します。 thead タグはテーブル ヘッダーを示し、 tbody タグはテーブル本体を示します。 例の表には 3 つの列があります。最初の列は名、2 番目の列は姓、3 番目の列は操作列です。 操作列には 2 つの操作が含まれます。1 つはテーブルに行を追加する操作で、もう 1 つは現在の行を削除する操作です。行の追加と削除の操作は、それぞれ 2 つのボタンにバインドされています。ボタンをクリックすると、行の追加と削除の対応する操作がトリガーされます。 行の追加方法 関数add(){ var trObj = document.createElement("tr"); trObj.id = 新しい日付()。getTime(); trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'> <input type='button' value='Del' onclick='del(this)'></td>"; document.getElementById("tb").appendChild(trObj); } 最初の行は tr 要素を作成します。つまり、テーブル行を作成します。 2 行目の 3 行目、 4 行目の 行削除メソッド 関数 del(obj) { var trId = obj.parentNode.parentNode.id; var trObj = document.getElementById(trId); document.getElementById("tb").removeChild(trObj); } 削除メソッドにパラメータが渡されます。行追加メソッドでは、削除メソッド del に this パラメータが渡されていることがわかります。ページ コード内の this は、現在の HTML 要素、つまり this が配置されている <input> フィールドを参照します。 最初の行、 2 行目の 3 行目の 欠陥 上記のコードは基本的に、テーブル内の行を動的に追加および削除する機能を実装していますが、主に次の 2 つの点に欠陥があります。 1 行を追加する前と後で表の幅が変わる 前面を追加 行を追加した後 行を追加すると、表の列が広くなります 2 ブラウザで開いたデフォルトページの中国語のテキストが文字化けする 正常に表示するには、ページのエンコード形式を変更するために文字エンコードを設定する必要があります。 |
<<: スタートアップ企業が丹念に作り上げた優れたウェブデザイン17選
>>: Vue が値を返してフォームを動的に生成し、データを送信する仕組みの詳細な説明
新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...
HTMLカラーブロックを使用してデータを動的に表示する <スタイル タイプ="te...
【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...
目次序文1. 問題の原因2. 解決策VueはelementUIテーブルtr thの高さと背景色を変更...
私が書いた内容が理解できない場合は、インターネット上に理解できるチュートリアルがない可能性があります...
時間は本当に存在するのでしょうか?時間は人間が考え出した概念に過ぎず、物事の変化を測る基準に過ぎない...
この記事では、Web ページを作成する前に確認すべき、いわゆる仕様をいくつかまとめました。皆様のお役...
エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...
目次序文keep-avlive フック関数keep-avliveはどのコンポーネントをキャッシュする...
1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...
Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...
スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。スタイル シートは...
コンテナの起動時に Docker コンテナ内のアプリケーション サービスを自動的に起動する場合。 D...
1. Linuxのインストール(rootユーザー操作) 1. vncserver をインストールしま...
vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...