久しぶりにプログラミング関連の投稿です。

今回は実装はとても簡単ですが、いろいろなところで使える内容です。

こんなユーザインタフェースを作った時に、削除ボタンを押すとその行だけ消すことができれば、ユーザエクスペリエンスとしても非常に分かりやすく、直感的な操作を行うことができますよね。

row_delete

まずはHTMLです。

<br />&lt;table&gt;<br />&lt;tr&gt;<br />&lt;td&gt;適当な文字列&lt;/td&gt;<br />&lt;td&gt;&lt;input class="menu" type="button" value="削除" onClick="deleteRow(this)"&gt;&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;<br />


こんな感じでテーブルが構成されているとします。ここで重要なのは、onClick=”deleteRow(this)”です。この記述がJavaScriptを呼び出すためのものです。


では、次にJavaScriptです。


<br />function deleteRow (obj) {<br /><%%KEEPWHITESPACE%%>	var tr = obj.parentNode.parentNode;<br /><%%KEEPWHITESPACE%%>	tr.parentNode.deleteRow(tr.sectionRowIndex);<br />}<br />


わずか2行です。これだけで削除ボタンを押した行だけを消すことができます。PHPだけで実装すると大変ですが、JavaScriptを使うととても簡単にできます。


ご活用して頂ければと思います。本日は以上です。


 




こちらの投稿も読んでみませんか？
    

  1. [JavaScript]動的に行を追加する 
    2. 

  2. [JavaScript]子ウインドウから親ウインドウを更新する方法 
    3. 

  3. [JavaScript]指定した住所でGoogleMapを開く 
    4. 

  4. [JavaScript]子ウインドウから親ウインドウの関数を実行する 
    5.