jQueryを使ってテーブルを操作して値を代入する方法-フロントエンドQ&A-php.cn

jQueryを使ってテーブルを操作して値を代入する方法

PHPz

リリース： 2023-04-17 16:12:43

オリジナル

1112 人が閲覧しました

テーブルはフロントエンド開発でよく使われるコンポーネントで、フォーム内のデータを操作して値を代入する必要がよくあります。この記事ではjQueryを使ってテーブルを操作したり値を代入したりする方法を紹介します。

1. jQueryを使ってテーブルを操作する

テーブルオブジェクトを取得する

テーブルを操作する際には、まずテーブルオブジェクトを取得する必要があります。 jQuery のセレクターを使用してテーブルオブジェクトを取得します。サンプルコードは次のとおりです:

 var table = $('#tableId');

ログイン後にコピー

ここでの tableId はテーブルの ID 値です。テーブルを直接選択する場合は、テーブル要素を直接使用します。

テーブル内の行と列を取得します

操作のためにテーブル内の行と列を取得します。children() メソッドを使用できます:

 var rows = table.children('tbody').children('tr');//获取表格所有行
 var columns = rows.eq(0).children('td');//获取第一行的所有列

ログイン後にコピー

テーブル内の単一セルを取得する

セルは、children() メソッドを使用して取得できます:

 var cell = rows.eq(0).children('td').eq(0);//获取第一行第一列的单元格

ログイン後にコピー

テーブルデータを変更する

text() メソッドと html() メソッドを使用してテーブルデータを変更します。

 cell.text(‘new text’);//修改单元格的文本
 cell.html('<input type="text" value="new value">');//修改单元格的html

ログイン後にコピー

ご存知のとおり、 jQuery のセレクターは強力で、さまざまな条件に基づいて要素を選択できます。選択された行を取得するには、対応するセレクターを使用できます。

2. jQuery を使用してテーブルの値を割り当てます

val() メソッドを使用しますセルの値を割り当てるには:

 var inputText = $('#inputText').val();//获取表单input的值
 var cell = rows.eq(0).children('td').eq(0);
 cell.empty().append(inputText);//设置单元格的文本值

ログイン後にコピー

テーブルの最後の行にデータ行を追加するには、 append() メソッドを使用できます。

 var newRow = $('<tr></tr>');//创建新行
 newRow.append('<td>new value1</td><td>new value2</td>');//向新行中添加单元格并赋值
 table.append(newRow);//将新行添加到表格末尾

ログイン後にコピー

3. テーブルプラグイン

DataTables の使用は、強力な jQuery プラグです。 -in は HTML テーブルを拡張します。ページング、ソート、検索機能などをサポートします。 DataTables の導入自体は元のテーブルのスタイルを上書きしないので、テーブルは通常通り表示されますが、美しいスタイルが追加されます。

BootstrapTable は、Bootstrap に基づいて開発された jQuery テーブルプラグインです。優れたレスポンシブデザインを備えており、検索、並べ替え、ページングなどの機能をサポートし、カスタムテンプレートやテーマもサポートしています。

まとめ

以上はjQueryのテーブル操作と代入テーブルの基礎知識ですが、実際の開発ではテーブルの読み込みや代入もよく使う技術ポイントです。同時に、開発効率と UI 効果を向上させるために、テーブルプラグインの使用も良い選択です。この記事が読者にインスピレーションを与え、役立つことを願っています。

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