JQueryでクリックされた文字を取得する方法
- JQueryを使用してテーブル内のクリックされた文字を取得する方法を教えてください。
- テーブルに連番が振られており、その文字情報をJQueryで取得する方法について教えてください。
- 例えば、1がクリックされた場合には1を取得する方法を教えてください。
- ベストアンサー
JQueryでクリックされた文字を取得したい
テーブルがあり、連番が 1 2 3 と振ってあります。 その文字情報をJQueryで取得するにはどのように記述すれば良いのでしょうか？ 例）1をクリック → 1 を取得。 <table border="1" width="150"> <tbody> <tr> <td width="50"><a href="#">1</a></td> <td>田中</td> </tr> <tr> <td><a href="#">2</a></td> <td>佐藤</td> </tr> <tr> <td><a href="#">3</a></td> <td>鈴木</td> </tr> </tbody> </table> ご存知の方教えて下さい。
- taaaaaaa
- お礼率40% (45/111)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#2です。 一応全部書いたサンプル。 （アンカーは不要に感じたので、1列目のセルという感じで指定してます） <html> <head> <title></title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('#table1 td:first-child').click(function(){ alert( $(this).text() ); }); }); </script> </head> <body> <table border="1" width="150" id="table1"> <tbody> <tr> <td width="50">1</td> <td>田中</td> </tr> <tr> <td>2</td> <td>佐藤</td> </tr> <tr> <td>3</td> <td>鈴木</td> </tr> </tbody> </table> </body> </html>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
click で ハンドラを結び付けます。 ハンドラ内では $(this) がイベント発生元を示します。 例 $('table a').click(function(){ var text = $(this).text(); }); このままだと全てのtable配下の全てのリンクに反応するのでtableにidやリンクにclassを付けておかないと使い勝手が悪いと思いますが。
- yambejp
- ベストアンサー率51% (3827/7415)
JQueryじゃないとだめなんですか？
補足
セルの要素を取得するのに var cel = event.srcElement.innerText; （IE以外ではsrcElementの代わりにtargetを使う。） で出来るのがわかりました。 記述が長くなりそうなのでJQueryを使うと短くなるのかと思ったものですから。
関連するQ&A
- jqueryでどうやってエスケープ？
<table border> <tbody> <tr><th>名前</th><th>学年</th><th>評価</th></tr> <tr><td>山田</td><td>１年</td><td>A</td></tr> <!-- ここにエスケープしてappendしていきたい。 --!> </tbody> </table> はじめまして。 上記のようなテーブルがあり、ここに新しく <tr><td>鈴木</td><td>2年</td><td>B</td></tr>をエスケープしてjqueryで追加していきたい場合、一般的にどのように書けば良いのでしょうか？ エスケープせず追加するのなら、 $("table").append("<tr><td>鈴木</td><td>2年</td><td>B</td></tr>"); と書けば良いかと思いますが、エスケープしながら追加していく方法がわかりません。 わかる方、宜しくお願い致します。
- ベストアンサー
- JavaScript
- テーブルサイズ指定
こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という２つのテーブルで、 ２つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- 半角だけだとtableタグのwidth指定が無効になってしまう。
半角だけだとtableタグのwidth指定が無効になってしまいます。半角を入力した際にwidth指定を有効にする方法をご教授お願いします。 <TABLE border="1" width="110"> <TBODY> <TR width="110"> <TD width="110">０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９</TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="1" width="110"> <TBODY> <TR width="110"> <TD width="110">0123456789012345678901234567890123456789012345678901234567890</TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- HTML
- <td> 内のテーブルを上寄せにするには？
すみません教えていただけますか？ 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか？ よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> </td> </tr> </table>
- ベストアンサー
- HTML
- テーブルの隙間をなくす
テーブルの中に作ったテーブルを一番上に配置したいのですが、どうすれば良いでしょうか？テーブルの下で改行すると上に行くのですが、それだとしたがあまります。 ＨＴＭＬはこれです。よろしくお願いします。 <table width="800" border="0" cellspacing="0" cellpadding="0" height="600"> <tr> <td> <TABLE width="100%"> <TBODY> <TR> <TD width="241" height="2"> </TD> <TD width="511" align="right" valign="bottom" style="font-size : 8pt;" height="2"> </TD> </TR> </TBODY> </TABLE> </td> </tr> </table>
- ベストアンサー
- HTML
- Layerの中にあるリンクがmacで動作しません
以下が友達に質問されたソースを簡略化した物です。layerを左右2段組みにしてますが、右のlayer内が全く反応しません。layerを使わなければできるのですが、この方法のどこが間違っているかが教えられなくて質問しました。よろしくお願い致します。 javascript～window.open省略 <DIV style="top : 61px; left : 356px; position : absolute; z-index : 1; width: 331px; height: 40px;" id="Layer2"> <DIV> <TABLE border="1" width="331" height="40"> <TBODY> <TR> <TD width="61" height="20">サンプル2</TD> <TD width="214"><A href="#">◆</A></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 61px;left : 24px; position : absolute; z-index : 3; " id="Layer5"> <DIV> <TABLE border="1" width="313" height="40"> <TBODY> <TR> <TD width="134" height="16">サンプル</TD> <TD width="141"><A href="#">◆</A> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV>
- ベストアンサー
- HTML
- Dreamweaverのデザインで表示がおかしい時
IEだと綺麗に表示されるけど、Dreamweaverのデザインで見ると表示がおかしい時って結構あり困ってます。 ソースフォーマットとかやってもやはり駄目です。 今回の場合、どのタグが悪そうでしょうか？ <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP"> </HEAD> <BODY> <BR> <BR> <BR> <TABLE align="center" cellSpacing=0 cellPadding=0 width="95%" bgColor=#0066cc border=0> <TBODY><TR><TD> <TABLE cellSpacing=2 cellPadding=1 width="100%" border=0> <TBODY> <TR bgColor=#0066cc> <TD align=middle><SMALL><B><FONT color=#ffffff> テキストツール </FONT></A></B></SMALL> </TD></TR> <TR bgColor=#ffffff> <TD align=middle> <TABLE height="400" cellSpacing=0 cellPadding=1 width="95%" border=0> <TBODY> <TR valign=top> <TD width="100%" valign="center" align="center"> <BR><A>トップページ</A><BR><BR> </TD> </TR> <TR valign=top> <TD width="100%" valign="top" align="center"> <A HREF="list">あ</A><BR><BR> <A HREF="clist">い</A><BR><BR> <A HREF="slist">う</A><BR><BR> </TD> </TR> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </BODY></HTML>
- ベストアンサー
- ホームページ作成ソフト
- セルの幅について
htmlで指定した幅と開発者ツールで確認した実際の幅、JQUERYで取得できる幅 それぞれ違うのはなぜでしょうか。 具体的なｈｔｍｌは以下のようなものです。 table-layout: fixedは都合により使う事ができません。 <script src="./jquery.js" type="text/javascript"></script> <table border="1"> <colgroup> <col width="10"> <col width="20"> <col width="30"> </colgroup> <thead> </thead> <tbody> <tr> <td class="a">a</td> <td class="b">b</td> <td class="c">c</td> </tr> </tbody> </table> <script type="text/javascript"> alert($('.a').width()); </script> 開発者ツールで確認すると左から14 24 34の幅になります。 また、jqueryでセルの幅をwidth()で取得すると 12 22 32となります。 指定 使用しているブラウザはIE8 / IE6です。
- 締切済み
- HTML
- jqueryのsortableで行き来自由に
お世話になります jqueryのsortableでconnectWithを使うことで 別のエリアにソートが可能になりますが すべての要素を別の要素に移動した場合 もとの場所に戻すことが不可能になってしまいます これを可能にするにはどうしたらいいのでしょうか 例として以下のソース AエリアからBエリアに「a」「b」を移動させた後に BエリアからAエリアに戻そうとしても、移動できなくなってしまいます <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>connectWith</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sortable table tbody").sortable({ connectWith:'#sortable table tbody' }).disableSelection(); }); </script> </head> <body> <div id="sortable"> <!-- エリア A 始まり --> <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル エリアA（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>a</td> </tr> <tr> <td>b</td> </tr> </tbody> </table> <!-- エリア A 終わり --> <!-- エリア B 始まり --> <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル エリアB（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>c</td> </tr> <tr> <td>d</td> </tr> </tbody> </table> <!-- エリア B 終わり --> </div> </body> </html> 対策方法御存知の方 お助け下さいませ！
- ベストアンサー
- JavaScript
- webBrowserで名前のないタグの値を取得
C#でwebBrowserオブジェクトを使ってhtmlから様々な情報を引き出したいのですが、 id名やclass名のないタグの値などはどのように取得すれば良いのでしょうか？ 例えば <tabel> <tbody> <tr> <td>テスト1</td> <td>テスト2</td> <td>テスト3</td> </tr> </tbody> </table> のような場合、「テスト3」という値を取得したい場合はどうするのでしょうか？ ★htmlにこのようなtableが複数ある場合があるので、まず一つ目のtableを見つけ、順にその子であるtdを取得して3つめのtdの値を取りたい、という感じです。 つまり、jQueryのような「○番目のtd」みたいな感じに取ることは可能でしょうか？ $("table:eq(0) > tbody > tr > td:eq(2)", this).val(); どうぞよろしくお願い致します。
- ベストアンサー
- C・C++・C#
お礼
早速ありがとうございます。 text() を使うといいのですね。 IEでもFireFoxでも動作確認出来ました。 これでコード番号などが扱えそうです。