2022.04.04 システム
[jQuery] appendメソッドを用いて要素を追加してみよう。
こんにちは。
本日はappendメソッドを用いて要素を追加する方法を、共有したいと思います。
それでは、以下手順となります。
Viewを作成する
templates/Test/の中にtest.phpを作成し、表を用意します。
<table border="1" id="appendArea"> <tr> <th>行を追加してみよう!!</th> </tr> </table> <?php echo $this->Form->button('追加', array('type' => 'button', 'onClick'=>'return test();'));?>
<画面イメージ>
スクリプトを作成する
webroot/js/の中にtest.jsを作成します。
「追加」ボタンがクリックされたときに、指定した要素内の最後に引数のstrHtmlが追加されます。
function test() { // html要素を作成 var strHtml = ''; strHtml = strHtml + '<tr>'; strHtml = strHtml + ' <td>行が追加されました!</td>'; strHtml = strHtml + '</tr>'; // 指定した位置にhtml要素をセット $('#appendArea').append(strHtml); }
動作確認
「追加」ボタンをクリックし、「行が追加されました!」
が表示されれば成功です。
<画面イメージ>
いかがだったでしょうか?
今後もjQueryに関する記事を投稿しますのでお楽しみに。