HTML_PowerNode Java アカデミーでテーブルを動的に追加する

HTML_PowerNode Java アカデミーでテーブルを動的に追加する

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。

<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 行目のtrObj.id = new Date().getTime();この行に id 属性を追加し、現在のシステムのミリ秒を取得して属性に値を割り当てます。これは主に削除時に必要です。

3 行目、 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> "; テーブルの行に値を割り当て、innerHTMML属性を使用して、追加する行コンテンツである<tr>タグと</tr>タグの間のHTMLコードコンテンツを設定します。

4 行目のdocument.getElementById("tb").appendChild(trObj);作成されたテーブル行をテーブル本体に追加します。

行削除メソッド

関数 del(obj) {  
    var trId = obj.parentNode.parentNode.id;  
    var trObj = document.getElementById(trId);  
    document.getElementById("tb").removeChild(trObj);  
}

削除メソッドにパラメータが渡されます。行追加メソッドでは、削除メソッド del に this パラメータが渡されていることがわかります。ページ コード内の this は、現在の HTML 要素、つまり this が配置されている <input> フィールドを参照します。

最初の行、 var trId = obj.parentNode.parentNode.id ; は、現在の要素の親ノードの親ノードの ID、つまり削除する行の ID を取得します。

2 行目のvar trObj = document.getElementById(trId);削除する行要素を取得します。

3 行目のdocument.getElementById("tb").removeChild(trObj);テーブル本体の行を削除します。

欠陥

上記のコードは基本的に、テーブル内の行を動的に追加および削除する機能を実装していますが、主に次の 2 つの点に欠陥があります。

1 行を追加する前と後で表の幅が変わる

前面を追加

行を追加した後

行を追加すると、表の列が広くなります

2 ブラウザで開いたデフォルトページの中国語のテキストが文字化けする

正常に表示するには、ページのエンコード形式を変更するために文字エンコードを設定する必要があります。

<<:  スタートアップ企業が丹念に作り上げた優れたウェブデザイン17選

>>:  Vue が値を返してフォームを動的に生成し、データを送信する仕組みの詳細な説明

推薦する

CSS の新機能には、コントロールページの再描画と再配置の問題が含まれています

新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...

カラーブロックレポート効果の動的な表示を実現する HTML (サンプルコード)

HTMLカラーブロックを使用してデータを動的に表示する <スタイル タイプ="te...

MySQL の WriteSet 並列レプリケーションの簡単な分析

【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...

要素テーブルヘッダー行の高さの問題の解決

目次序文1. 問題の原因2. 解決策VueはelementUIテーブルtr thの高さと背景色を変更...

macOS での MySQL 8.0.17 のインストールと簡単な設定チュートリアル

私が書いた内容が理解できない場合は、インターネット上に理解できるチュートリアルがない可能性があります...

MySQL の時間設定に関する考慮事項の詳細な要約

時間は本当に存在するのでしょうか?時間は人間が考え出した概念に過ぎず、物事の変化を測る基準に過ぎない...

ウェブページを作る前に、これらのいわゆる仕様を見てみましょう

この記事では、Web ページを作成する前に確認すべき、いわゆる仕様をいくつかまとめました。皆様のお役...

フェッチネットワークリクエストのカプセル化例の詳細な説明

エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...

Vue フロントエンド開発における keepAlive の使用方法の詳細な説明

目次序文keep-avlive フック関数keep-avliveはどのコンポーネントをキャッシュする...

4 つの主要な SQL ランキング関数 ROW_NUMBER、RANK、DENSE_RANK、NTILE の使用方法の紹介

1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...

Python Django アプリケーションを Docker 化する方法

Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...

W3C チュートリアル (6): W3C CSS アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。スタイル シートは...

Dockerコンテナでアプリケーションサービスを自動的に起動する方法の例

コンテナの起動時に Docker コンテナ内のアプリケーション サービスを自動的に起動する場合。 D...

Linuxにグラフィカルインターフェースをインストールする方法

1. Linuxのインストール(rootユーザー操作) 1. vncserver をインストールしま...

ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する

vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...