jqueryを使用してテーブルの内容を変更する方法

フロントエンド開発では、テーブルはデータを表示するためによく使用される方法です。しかし、テーブルの内容を変更する必要がある場合、多くの場合、手動で 1 つずつ変更する必要があり、非常に面倒で非効率的です。したがって、jQuery を使用してテーブルのコンテンツを変更することは、非常に良い解決策です。

jQuery とは何ですか?

jQuery によるテーブル コンテンツの変更について説明する前に、まず jQuery について理解しましょう。 jQuery は、ドキュメントの操作を簡素化し、イベントを処理し、アニメーションを作成し、AJAX やその他の強力な機能を処理するための多くのメソッドをカプセル化する優れた JavaScript ライブラリです。 jQueryを利用することでドキュメントの操作がより便利になり、開発効率が向上します。

テーブルの内容を変更する操作

次に、jQuery を使用してテーブルの内容を変更する方法を見てみましょう。

まず、HTML ページにテーブルを作成し、それに次のようなコンテンツを追加する必要があります。

<table id="myTable">
   <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>性别</th>
   </tr>
   <tr>
     <td>小明</td>
     <td>20</td>
     <td>男</td>
   </tr>
   <tr>
     <td>小红</td>
     <td>18</td>
     <td>女</td>
   </tr>
</table>

次に、テーブルのコンテンツを変更するための jQuery コードを記述する必要があります。次のコードは使用できる例です:

$(document).ready(function() {
    //获取表格中的单元格
    var $table = $('#myTable');
    var $tdList = $table.find('td');
    
    $tdList.each(function(){
        //获取单元格中的值
        var oldValue = $(this).text();
        //创建input
        var $input = $('<input type="text" class="form-control">');
        $input.val(oldValue);
        //替换
        $(this).html($input);
    });
    
    //监听input的keyup事件，即键盘按键事件
    $('input').live('keyup', function(event){
        //判断按键是否为enter键
        if(event.keyCode == 13) {
            //获取输入框的值
            var newValue = $(this).val();
            //替换单元格中的值
            $(this).parent().text(newValue);
        }
    });
});

コード分析:

1. $table = $('#myTable');: テーブル要素を取得します。 。
2. $tdList = $table.find('td');: テーブル内のすべてのセル要素を取得します。
3. $tdList.each(): すべてのセルを走査し、各セルの入力ボックスを作成します。
4. $(this).html($input);: 入力ボックスをセルに挿入し、セル内の元のコンテンツを置き換えます。
5. $('input').live('keyup', function(event){}): すべての入力ボックスのキーボード キー イベントを監視します。
6. if(event.keyCode == 13): Enter キーが押されたかどうかを判断します。
7. $(this).parent().text(newValue): 入力ボックスの内容をセルの元の内容に置き換えます。

概要

上記のコード例は、すべてのセルを走査して各セルの入力ボックスを動的に作成し、入力ボックスに新しいデータを入力して Enter キーを押します。元のデータと新しいデータ。この方法は、テーブルデータを 1 つずつ変更する場合に適しています。

jQuery は、強力な JavaScript ライブラリとして、テーブルの内容を変更する際にも大きな利点があります。 jQuery を使用すると、その豊富な機能により、より効率的で便利なテーブル コンテンツの変更を実現できます。

以上がjqueryを使用してテーブルの内容を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。