parentとparents

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>parentとparents</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript">
  8.   $(document).ready(function () {
  9.     // aタグにクリックイベント時にviewLine()を実行と追加(バインディング)
  10.     $('a').bind('click', viewLine);
  11.   });
  12.   
  13.   var viewLine = function(e)
  14.   {
  15.     // クリックされたaタグの直ぐ上の親のtd
  16.     pTd = $(this).parent("td");
  17.     pTdAry = {
  18.       pTdHTML          : $(this).parent("td").html(),
  19.       pTdlength        : $(this).parent("td").length,
  20.       pTd_HTML         : pTd.html(),
  21.       pTd_length       : pTd.length,
  22.       pTd0_innerHTML   : pTd[0].innerHTML,
  23.       pTd0_textContent : pTd[0].textContent,
  24.       pTd0_outerHTML   : pTd[0].outerHTML,
  25.     };
  26.     // クリックされたaタグの親(parentじゃなくて、parents)のtd
  27.     psTd = $(this).parents("td");
  28.     psTdAry = {
  29.       psTdHTML          : $(this).parents("td").html(),
  30.       psTdlength        : $(this).parents("td").length,
  31.       psTd_HTML         : psTd.html(),
  32.       psTd_length       : psTd.length,
  33.       psTd0_innerHTML   : psTd[0].innerHTML,
  34.       psTd0_textContent : psTd[0].textContent,
  35.       psTd0_outerHTML   : psTd[0].outerHTML,
  36.     };
  37.     // クリックされたaタグの直ぐ上の親のtr
  38.     pTrAry = {
  39.       pTrHTML          : $(this).parent("tr").html(),
  40.       pTrlength        : $(this).parent("tr").length,
  41.     };
  42.     // クリックされたaタグの親(parentじゃなくて、parents)のtr
  43.     psTr = $(this).parents("tr");
  44.     psTrAry = {
  45.       psTrHTML          : $(this).parents("tr").html(),
  46.       psTrlength        : $(this).parents("tr").length,
  47.       psTr_HTML         : psTr.html(),
  48.       psTr_length       : psTr.length,
  49.       psTr0_innerHTML   : psTr[0].innerHTML,
  50.       psTr0_textContent : psTr[0].textContent,
  51.       psTr0_outerHTML   : psTr[0].outerHTML,
  52.     };
  53.     // 以下、出力用 ========================================
  54.     output = "";
  55.     
  56.     output += '/* ============== ▼出力結果' + "\n";
  57.     output += "\n// ================================ \n";
  58.     output += '// クリックされたaタグの直ぐ上の親のtd' + "\n";
  59.     output += 'pTd = $(this).parent("td");' + "\n";
  60.     output += 'pTdAry = {' + "\n";
  61.     output += ' pTdHTML          : $(this).parent("td").html(),' + "\n";
  62.     output += ' pTdlength        : $(this).parent("td").length,' + "\n";
  63.     output += ' pTd_HTML         : pTd.html(),' + "\n";
  64.     output += ' pTd_length       : pTd.length,' + "\n";
  65.     output += ' pTd0_innerHTML   : pTd[0].innerHTML,' + "\n";
  66.     output += ' pTd0_textContent : pTd[0].textContent,' + "\n";
  67.     output += ' pTd0_outerHTML   : pTd[0].outerHTML,' + "\n";
  68.     output += '};' + "\n";
  69.     for (var k_pTd in pTdAry)
  70.     {
  71.       output += k_pTd + ': ' + pTdAry[k_pTd] + "\n";
  72.     }
  73.     output += "\n// ================================ \n";
  74.     output += '// クリックされたaタグの親(parentじゃなくて、parents)のtd' + "\n";
  75.     output += '// 直ぐ上の親がtdなのでソレをとってくれる' + "\n";
  76.     output += 'psTd = $(this).parents("td");' + "\n";
  77.     output += 'psTdAry = {' + "\n";
  78.     output += ' psTdHTML          : $(this).parents("td").html(),' + "\n";
  79.     output += ' psTdlength        : $(this).parents("td").length,' + "\n";
  80.     output += ' psTd_HTML         : psTd.html(),' + "\n";
  81.     output += ' psTd_length       : psTd.length,' + "\n";
  82.     output += ' psTd0_innerHTML   : psTd[0].innerHTML,' + "\n";
  83.     output += ' psTd0_textContent : psTd[0].textContent,' + "\n";
  84.     output += ' psTd0_outerHTML   : psTd[0].outerHTML,' + "\n";
  85.     output += '};' + "\n";
  86.     for (var k_psTd in psTdAry)
  87.     {
  88.       output += k_psTd + ': ' + psTdAry[k_psTd] + "\n";
  89.     }
  90.     output += "\n// ================================ \n";
  91.     output += '// クリックされたaタグの直ぐ上の親のtr' + "\n";
  92.     output += '// 直ぐ上の親はtdだから「$(this).parent("tr")」は使えない' + "\n";
  93.     output += 'pTrAry = {' + "\n";
  94.     output += ' pTrHTML          : $(this).parent("tr").html(),' + "\n";
  95.     output += ' pTrlength        : $(this).parent("tr").length,' + "\n";
  96.     output += '};' + "\n";
  97.     for (var k_pTr in pTrAry)
  98.     {
  99.       output += k_pTr + ': ' + pTrAry[k_pTr] + "\n";
  100.     }
  101.     output += "\n// ================================ \n";
  102.     output += '// クリックされたaタグの親(parentじゃなくて、parents)のtr' + "\n";
  103.     output += 'psTr = $(this).parents("tr");' + "\n";
  104.     output += 'psTrAry = {' + "\n";
  105.     output += ' psTrHTML          : $(this).parents("tr").html(),' + "\n";
  106.     output += ' psTrlength        : $(this).parents("tr").length,' + "\n";
  107.     output += ' psTr_HTML         : psTr.html(),' + "\n";
  108.     output += ' psTr_length       : psTr.length,' + "\n";
  109.     output += ' psTr0_innerHTML   : psTr[0].innerHTML,' + "\n";
  110.     output += ' psTr0_textContent : psTr[0].textContent,' + "\n";
  111.     output += ' psTr0_outerHTML   : psTr[0].outerHTML,' + "\n";
  112.     output += '};' + "\n";
  113.     for (var k_psTr in psTrAry)
  114.     {
  115.       output += k_psTr + ': ' + psTrAry[k_psTr] + "\n";
  116.     }
  117.     output += '▲出力結果 ============== */' + "\n";
  118.     
  119.     $("#output").text(output);
  120.     // ここまで、出力用 ========================================
  121.     return false;
  122.   };
  123.   
  124.   
  125. </script>
  126. </head>
  127. <body>
  128. <h1>parentとparents</h1>
  129. <table>
  130. <tr><td>eetd1</td><td>eetd2</td><td><a href="#">ee</a></td></tr>
  131. <tr><td>fftd1</td><td>fftd2</td><td><a href="#">ff</a></td></tr>
  132. <tr><td>ggtd1</td><td>ggtd2</td><td><a href="#">gg</a></td></tr>
  133. </table>
  134. <table>
  135. <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>
  136. <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>
  137. <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>
  138. </table>
  139. <textarea style="width:95%;height:15em;" id="output"></textarea>
  140. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  141. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  142. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  143. </div>
  144. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  145. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  146. </div>
  147. </body>
  148. </html>