- 締切済み
idをつけてるtdタグの値をjQueryで
初めて質問させていただきます。 下記のようなテーブルがあった場合、<td id="ID">1234</td>の「1234」をjQueryで取得したいのですが、うまくいきません。 ご教授お願いいたします。 テーブルの例 <table id="nameTable"> <thead> <tr> <th>aaa</th> </tr> <tr> <td id="ID">1234</td> </tr> </thead> </table> 記述したjQuery $('table.nameTable td.ID').text();
- jensys
- お礼率15% (12/77)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kosukejlampnet
- ベストアンサー率44% (126/282)
idへのアクセスは#です。 $('table#nameTable td#ID').text(); もっと言えば、 $('#ID').text(); で、必要十分。
関連するQ&A
- 親要素の除去(Jqueryのunwrapメソッド)
jquery のunwrapメソッドを使用して下記コードを作成しました。 「div#wrap1」の配下に 「div#wrap2」、「div#wrap3」「div#wrap4」3つのdiv要素がありその3つの要素 それぞれの配下にはテーブル(3つとも同じ名前のテーブル)が存在しています。 ボタンを押下すると「div#wrap1」、「div#wrap2」、「div#wrap3」「div#wrap4」 を全て除去し、テーブルも1つだけ残すコードを書きました。 しかし、ボタン押下後、IEの開発者ツールでHTMLを確認するとテーブルは１つだけ 残っているのですが「div#wrap1」配下に存在しています。 コード中ではテーブルが残り1つになったテーブルに対して$(this).unwrap()とやって いるのですがこれがうまくいっていないようです。 原因がわかられる方はいらっしゃいますでしょうか。 <html> <head> <meta charset="UTF-8" /> <script src="jquery-1.9.1.js"></script> <script> $(function () { $( "#add" ).click(function () { if($("table[name='tblList']").length > 1) { // tableの親要素「div#wrap2」、「div#wrap3」「div#wrap4」を除去 $("table[name='tblList']").unwrap(); $("table[name='tblList']").each(function(){ // 「name='tblList'」のテーブルを削除 $(this).remove(); //「name='tblList'」のテーブルが残り1つの場合 if($("table[name='tblList']").length == 1) { // tableの親要素「div#wrap1」を除去 $(this).unwrap(); return false; } }); } }); }); </script> </head> <body> <input type="button" id="add" value="行追加"> <div id="wrap1"> <div id="wrap2"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> <div id="wrap3"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> <div id="wrap4"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- クリックされた罫表セルの行番号、列番号を取得するには
クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。 例えば 下記Tableの"き"という文字が入ったセルをクリックすると 列番号:2 行番号:3 という番号を取得したいのです。 <table> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody> <tr td>あ</td><td>い</td><td>う</td><td>え</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table> onclickでidのついた所をクリックした時のアクションは取得できましたが、Csvなどからデータを取得したtableのセルをクリックした時の 列数、行数を取得する事は可能でしょうか。 宜しくお願いします。
- ベストアンサー
- JavaScript
- jQueryで行の移動
ｊQueryでテーブルの行を移動させたいのですが、なかなかうまくいきません。 <table id = "table_test"> <tbody id = "test1"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button1" value="テスト1"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test2"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button2" value="テスト2"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test3"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button3" value="テスト3"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> </table> 処理としては、button1を押下したら、<tbody id = "test1">～</tbody>の内容を<tbody id = "test2">と<tbody id = "test3">の間にくるように移動させたいです。 trの内容を次のtrの次に移動させることは調べてわかったのですが、tbodyで囲まれている部分をごっそり抜き出して、次のtbodyの後に移動させる方法がわかりません。 tbody内にはtrが複数あるため、移動させるというよりは、追加させてから削除するといった感じになるのでしょうか？ どなたかご教授お願い致します。
- ベストアンサー
- JavaScript
- 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
- 2つのテーブルの幅を一致させたい
以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。 ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- 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> ご存知の方教えて下さい。
- ベストアンサー
- 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#
- 一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
- 二の表の値の計算をしたい。
いつもお世話になります。 見よう見まねでやっている超初心者です。 下の様なテーブルが二つあるページで テーブルabcの<td>のリンゴ、なす、西瓜の数値を テーブルefgのリンゴ、なす、西瓜の元値の値に 対して+-してその売値の数値を を自動で計算して求めたいと思っています。 <td>?</td>（(）内の回答のように） 表の値はどちらも可変します。 jabascriptでなるべくシンプルで簡単にできないでしょうか？ ご教授の程、どうぞよろしくお願い致します。 <table id="abc"> <tr> <th>リンゴ</th> <th>なす</th> <th>西瓜</th> </tr> <tr> <td>-20</td> <td>-10</td> <td>+200</td> </tr> </table> <table id="efg"> <tr> <th >ID</th> <th>果物</th> <th>元値</th> <th>売値</th> </tr> <tr> <td>1</td> <td>リンゴ</td> <td>140</td> <td>?(120)</td> </tr> <tr> <td>2</td> <td>リンゴ</td> <td>120</td> <td>?(100)</td> </tr> <tr> <td>3</td> <td>なす</td> <td>40</td> <td>?(30)</td> </tr> <tr> <td>4</td> <td>なす</td> <td>80</td> <td>?(70)</td> </tr> <tr> <td>5</td> <td>すいか</td> <td>800</td> <td>?(1000)</td> </tr> <tr> <td>6</td> <td>すいか</td> <td>1000</td> <td>?(1200)</td> </tr> </table>
- ベストアンサー
- JavaScript
