行がクリックされたときに行のデータを表示したい。私はこれをjQueryで管理していますが、これをより一般的にする方法がわかりません。これで、最初の行に ID を指定し、ターゲットにも ID を指定しましたが、行ごとに異なる ID を使用せずに、行ごとにこれを汎用にするにはどうすればよいでしょうか?
$(document).ready(function () {
$('#d01').click(function() {
$('#c01').css('display', 'block');
});
});
私のフィドル。
私がはっきりしていることを願っています....
よろしく、ケネス
クリック可能な各行に非表示の属性asideとして表示する一意のIDを割り当てます。data-
<tr data-details="c01" class="customer">
...
<table id="c01" class="aside hidden">
次に、を使用してこれを抽出し.data('details')、そのテーブルのみを表示できます。
$(document).ready(function () {
$('tr.customer').click(function() {
var id = $(this).data('details');
$('table.hidden').hide();
$('#'+id).show();
});
});
http://jsfiddle.net/mblase75/7x3CZ/
HTMLとJavaScriptを可能な限り分離でき、IDを自由に割り当てることができるため、このアプローチをお勧めします。
すべての行にクラスを割り当て、そのクラスのクリック イベントを処理します。行にID「d01」を割り当て、表示するテーブルに「d01_data」を割り当て、クリック可能な要素にクラス「行」を割り当てます。
$(document).ready(function () {
$('.row').click(function() {
var table_id = '#'+$(this).attr('id')+'_data';
$(table_id).show();
});
});
ID ではなく CSS クラスをセレクターで使用できます。
例えば
...
<tr class="myClassToIndicateIWantThisClickable">...</tr>
...
次に、JS で次を使用します。
$(document).ready(function () {
$('.myClassToIndicateIWantThisClickable').click(function() {
// do my stuff here
});
});
多くの要素に同じイベントを配置する場合は、ID の代わりにクラスを使用します。
したがって、すべて<tr>のクラス (たとえば、class="clickable") を指定し、このクラスを使用してクリック イベントをバインドします。要素をクリックすると、thisキーワードを使用して特定のオブジェクト データを取得できます。
このフィドルを参照してください。
HTML:
<table>
<thead>
<tr class="grey">
<th width="140px">Achternaam</th>
<th width="80px">Initialen</th>
<th width="80px">Tussenv.</th>
<th width="80px">Geslacht</th>
<th width="100px">Geb.dat.</th>
</tr>
</thead>
<tbody>
<tr id="d01" class="customer clickable">
<td>Pietersen</td>
<td>M.</td>
<td>Van</td>
<td>Male</td>
<td>18-07-1956</td>
</tr>
<tr class="customer grey clickable">
<td>Janssen</td>
<td>A.</td>
<td> </td>
<td>Female</td>
<td>16-12-1972</td>
</tr>
<tr class="customer clickable">
<td>Puk</td>
<td>P.L.</td>
<td>Van der</td>
<td>Female</td>
<td>16-07-1965</td>
</tr>
</tbody>
</table>
<br /><br />
<table id="c01" class="aside hidden">
<tbody>
<tr>
<td width="115px">Achternaam</td>
<td width="115px">Pietsersen</td>
</tr>
<tr>
<td>Tussenvoegsel</td>
<td>Van</td>
</tr>
<tr>
<td>Initialen</td>
<td>M.</td>
</tr>
<tr>
<td>Geslacht</td>
<td>Man</td>
</tr>
<tr>
<td>Geboortedatum</td>
<td>18-07-1956</td>
</tr>
</tbody>
</table>
<table class="aside hidden">
<tbody>
<tr>
<td width="115px">Achternaam</td>
<td width="115px">Pietsersen</td>
</tr>
<tr>
<td>Tussenvoegsel</td>
<td>Van</td>
</tr>
<tr>
<td>Initialen</td>
<td>M.</td>
</tr>
<tr>
<td>Geslacht</td>
<td>Man</td>
</tr>
<tr>
<td>Geboortedatum</td>
<td>18-07-1956</td>
</tr>
</tbody>
</table>
<table class="aside hidden">
<tbody>
<tr>
<td width="115px">Achternaam</td>
<td width="115px">Pietsersen</td>
</tr>
<tr>
<td>Tussenvoegsel</td>
<td>Van</td>
</tr>
<tr>
<td>Initialen</td>
<td>M.</td>
</tr>
<tr>
<td>Geslacht</td>
<td>Man</td>
</tr>
<tr>
<td>Geboortedatum</td>
<td>18-07-1956</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function () {
$('.clickable').click(function() {
var $this = $(this);
$this.find('td').each(function(){
//inside the each loop, the 'this' keyword refers to the current <td>
alert($(this).text());
});
$('#c01').css('display', 'block');
});
});
これを試してください、私はフィドルを更新しました：
私は与えました
id=c01
に
id=c03
別のテーブル用。また、表示する必要があるテーブルのIDを持つテーブルにカスタムフィールドを1つ追加しました。
tr をクリックするたびに、テーブルが表示されます。
$(document).ready(function () {
$('#anyid').click(function() {
$(this).css('display', 'block');
});
});
<tr id="anyid">
<td>hello</td>
<td>world</td>
</tr>
<tr id="anyid">
<td>hello1</td>
<td>world1</td>
</tr>