parentとparents
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>parentとparents</title>
- <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- // aタグにクリックイベント時にviewLine()を実行と追加(バインディング)
- $('a').bind('click', viewLine);
- });
-
- var viewLine = function(e)
- {
- // クリックされたaタグの直ぐ上の親のtd
- pTd = $(this).parent("td");
- pTdAry = {
- pTdHTML : $(this).parent("td").html(),
- pTdlength : $(this).parent("td").length,
- pTd_HTML : pTd.html(),
- pTd_length : pTd.length,
- pTd0_innerHTML : pTd[0].innerHTML,
- pTd0_textContent : pTd[0].textContent,
- pTd0_outerHTML : pTd[0].outerHTML,
- };
- // クリックされたaタグの親(parentじゃなくて、parents)のtd
- psTd = $(this).parents("td");
- psTdAry = {
- psTdHTML : $(this).parents("td").html(),
- psTdlength : $(this).parents("td").length,
- psTd_HTML : psTd.html(),
- psTd_length : psTd.length,
- psTd0_innerHTML : psTd[0].innerHTML,
- psTd0_textContent : psTd[0].textContent,
- psTd0_outerHTML : psTd[0].outerHTML,
- };
- // クリックされたaタグの直ぐ上の親のtr
- pTrAry = {
- pTrHTML : $(this).parent("tr").html(),
- pTrlength : $(this).parent("tr").length,
- };
- // クリックされたaタグの親(parentじゃなくて、parents)のtr
- psTr = $(this).parents("tr");
- psTrAry = {
- psTrHTML : $(this).parents("tr").html(),
- psTrlength : $(this).parents("tr").length,
- psTr_HTML : psTr.html(),
- psTr_length : psTr.length,
- psTr0_innerHTML : psTr[0].innerHTML,
- psTr0_textContent : psTr[0].textContent,
- psTr0_outerHTML : psTr[0].outerHTML,
- };
- // 以下、出力用 ========================================
- output = "";
-
- output += '/* ============== ▼出力結果' + "\n";
- output += "\n// ================================ \n";
- output += '// クリックされたaタグの直ぐ上の親のtd' + "\n";
- output += 'pTd = $(this).parent("td");' + "\n";
- output += 'pTdAry = {' + "\n";
- output += ' pTdHTML : $(this).parent("td").html(),' + "\n";
- output += ' pTdlength : $(this).parent("td").length,' + "\n";
- output += ' pTd_HTML : pTd.html(),' + "\n";
- output += ' pTd_length : pTd.length,' + "\n";
- output += ' pTd0_innerHTML : pTd[0].innerHTML,' + "\n";
- output += ' pTd0_textContent : pTd[0].textContent,' + "\n";
- output += ' pTd0_outerHTML : pTd[0].outerHTML,' + "\n";
- output += '};' + "\n";
- for (var k_pTd in pTdAry)
- {
- output += k_pTd + ': ' + pTdAry[k_pTd] + "\n";
- }
- output += "\n// ================================ \n";
- output += '// クリックされたaタグの親(parentじゃなくて、parents)のtd' + "\n";
- output += '// 直ぐ上の親がtdなのでソレをとってくれる' + "\n";
- output += 'psTd = $(this).parents("td");' + "\n";
- output += 'psTdAry = {' + "\n";
- output += ' psTdHTML : $(this).parents("td").html(),' + "\n";
- output += ' psTdlength : $(this).parents("td").length,' + "\n";
- output += ' psTd_HTML : psTd.html(),' + "\n";
- output += ' psTd_length : psTd.length,' + "\n";
- output += ' psTd0_innerHTML : psTd[0].innerHTML,' + "\n";
- output += ' psTd0_textContent : psTd[0].textContent,' + "\n";
- output += ' psTd0_outerHTML : psTd[0].outerHTML,' + "\n";
- output += '};' + "\n";
- for (var k_psTd in psTdAry)
- {
- output += k_psTd + ': ' + psTdAry[k_psTd] + "\n";
- }
- output += "\n// ================================ \n";
- output += '// クリックされたaタグの直ぐ上の親のtr' + "\n";
- output += '// 直ぐ上の親はtdだから「$(this).parent("tr")」は使えない' + "\n";
- output += 'pTrAry = {' + "\n";
- output += ' pTrHTML : $(this).parent("tr").html(),' + "\n";
- output += ' pTrlength : $(this).parent("tr").length,' + "\n";
- output += '};' + "\n";
- for (var k_pTr in pTrAry)
- {
- output += k_pTr + ': ' + pTrAry[k_pTr] + "\n";
- }
- output += "\n// ================================ \n";
- output += '// クリックされたaタグの親(parentじゃなくて、parents)のtr' + "\n";
- output += 'psTr = $(this).parents("tr");' + "\n";
- output += 'psTrAry = {' + "\n";
- output += ' psTrHTML : $(this).parents("tr").html(),' + "\n";
- output += ' psTrlength : $(this).parents("tr").length,' + "\n";
- output += ' psTr_HTML : psTr.html(),' + "\n";
- output += ' psTr_length : psTr.length,' + "\n";
- output += ' psTr0_innerHTML : psTr[0].innerHTML,' + "\n";
- output += ' psTr0_textContent : psTr[0].textContent,' + "\n";
- output += ' psTr0_outerHTML : psTr[0].outerHTML,' + "\n";
- output += '};' + "\n";
- for (var k_psTr in psTrAry)
- {
- output += k_psTr + ': ' + psTrAry[k_psTr] + "\n";
- }
- output += '▲出力結果 ============== */' + "\n";
-
- $("#output").text(output);
- // ここまで、出力用 ========================================
- return false;
- };
-
-
- </script>
- </head>
- <body>
- <h1>parentとparents</h1>
- <table>
- <tr><td>eetd1</td><td>eetd2</td><td><a href="#">ee</a></td></tr>
- <tr><td>fftd1</td><td>fftd2</td><td><a href="#">ff</a></td></tr>
- <tr><td>ggtd1</td><td>ggtd2</td><td><a href="#">gg</a></td></tr>
- </table>
- <table>
- <tr><td><input type="text" value="hhtd1"></td><td><input type="text" value="hhtd2"></td><td>hh3</td><td><a href="#">hh</a></td></tr>
- <tr><td><input type="text" value="iitd1"></td><td><input type="text" value="iitd2"></td><td>ii3</td><td><a href="#">ii</a></td></tr>
- <tr><td><input type="text" value="jjtd1"></td><td><input type="text" value="jjtd2"></td><td>jj3</td><td><a href="#">jj</a></td></tr>
- </table>
- <textarea style="width:95%;height:15em;" id="output"></textarea>
- <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
- <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
- <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
- </div>
- <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
- Copyright © 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
- </div>
- </body>
- </html>