{"id":2587,"date":"2025-06-08T15:56:01","date_gmt":"2025-06-08T06:56:01","guid":{"rendered":"https:\/\/www.dogrow.net\/hp\/?p=2587"},"modified":"2025-06-08T16:05:05","modified_gmt":"2025-06-08T07:05:05","slug":"blog163-%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e4%b8%8a%e3%82%92%e3%83%9b%e3%83%90%e3%83%bc%e6%99%82%e3%81%ab%e8%a1%8c%e3%83%bb%e5%88%97%e3%82%92%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e8%a1%a8","status":"publish","type":"post","link":"https:\/\/www.dogrow.net\/hp\/blog163-%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e4%b8%8a%e3%82%92%e3%83%9b%e3%83%90%e3%83%bc%e6%99%82%e3%81%ab%e8%a1%8c%e3%83%bb%e5%88%97%e3%82%92%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e8%a1%a8\/","title":{"rendered":"(163) \u30c6\u30fc\u30d6\u30eb\u4e0a\u3092\u30db\u30d0\u30fc\u6642\u306b\u884c\u30fb\u5217\u3092\u30cf\u30a4\u30e9\u30a4\u30c8\u8868\u793a\u3057\u305f\u3044\u3002"},"content":{"rendered":"

\u30101\u3011\u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n

\u3053\u3061\u3089\u306e\u30da\u30fc\u30b8\u306e\u3088\u3046\u306b\u3001\u30c6\u30fc\u30d6\u30eb\u4e0a\u3092\u30de\u30a6\u30b9\u30db\u30d0\u30fc\u3057\u305f\u6642\u306b\u3001\u30dd\u30a4\u30f3\u30c8\u3057\u3066\u3044\u308b\u884c\u3068\u5217\u306e\u80cc\u666f\u8272\u3092\u5909\u3048\u305f\u3044\u3002
\nhttps:\/\/baseball.yahoo.co.jp\/mlb\/stats\/batter?gameKindId=1002&type=avg
\n\"\"<\/a><\/p>\n

\u30102\u3011\u3084\u3063\u3066\u307f\u305f<\/h1>\n

1) \u5b9f\u88c5\u65b9\u91dd<\/h2>\n

\u5b9f\u88c5\u306e\u30dd\u30a4\u30f3\u30c8\u306f\uff1f
\n\u500b\u3005\u306e\u30bb\u30eb\u3092\u3001\u500b\u5225\u306b style\u5909\u66f4\u3084 class\u8ffd\u52a0\u30fb\u524a\u9664\u3059\u308b\u306e\u306f NG
\nWeb\u30d6\u30e9\u30a6\u30b6\u306e\u51e6\u7406\u8ca0\u8377\u304c\u4e0a\u304c\u308b\u3002<\/span><\/p>\n

\u884c\u65b9\u5411\u306f tr\u8981\u7d20\u3092\u4e00\u3064\u3060\u3051\u3001\u5217\u65b9\u5411\u306f colgroup\u8981\u7d20\u3092\u4e00\u3064\u3060\u3051\u3001
\n\u5408\u8a08 2\u56de\u306e style\u5909\u66f4 or class\u8ffd\u52a0\u30fb\u524a\u9664\u3067\u6e08\u307e\u305b\u308b\u3002<\/span><\/p>\n

2) \u30d7\u30ed\u30b0\u30e9\u30e0\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h2>\n
\r\n<!DOCTYPE html>\r\n<html lang="ja">\r\n  <head>\r\n    <meta charset="UTF-8">\r\n    <title>Sample 163<\/title>\r\n    <link rel="stylesheet" href="style.css" \/>\r\n  <\/head>\r\n  <body>\r\n    <h2>\u30c6\u30fc\u30d6\u30eb\u4e0a\u3092\u30db\u30d0\u30fc\u3059\u308b\u3068\u884c\u30fb\u5217\u304c\u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u308b\u3002<\/h2>\r\n    <table class="myHover">\r\n      <?php echo makeHtml_colgroup(25);\r\n            echo makeHtml_tbody(20,25); ?>\r\n    <\/table>\r\n    <script src="script.js"><\/script>\r\n  <\/body>\r\n<\/html>\r\n\r\n<?php\r\n\/\/ \u8907\u6570\u884c\u3001\u8907\u6570\u5217\u306e\u30c6\u30fc\u30d6\u30eb\u4f5c\u6210\u304c\u697d\u306a\u306e\u3067\u3001PHP\u3067\u66f8\u304f\u3002\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\nfunction makeHtml_colgroup( $nCol ){\r\n  $html = '';\r\n  for( $c = 0 ; $c < $nCol ; $c++ ){\r\n    $html .= '<col>';\r\n  }\r\n  return '<colgroup>'.$html.'<\/colgroup>';\r\n}\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\nfunction makeHtml_tbody( $nRow, $nCol ){\r\n  $html = '';\r\n  for( $r = 0 ; $r < $nRow ; $r++ ){\r\n    $html .= '<tr>';\r\n    for( $c = 0 ; $c < $nCol ; $c++ ){\r\n      $html .= '<td> . <\/td>';\r\n    }\r\n    $html .= '<\/tr>';\r\n  }\r\n  return '<tbody>'.$html.'<\/tbody>';\r\n}\r\n?>\r\n<\/pre>\n
\u4e00\u6614\u524d\u306f\u3001\u3053\u3046\u3044\u3046 UI\u5468\u308a\u306e\u30b3\u30fc\u30c9\u3092\u66f8\u3053\u3046\u3068\u601d\u3046\u3068 JQuery\u306e\u51fa\u756a\u3060\u3063\u305f\u304c\u3001
\nNative JavaScript\u304c\u305a\u3063\u3068\u4fbf\u5229\u306b\u306a\u3063\u305f\u306e\u3067\u3001\u6700\u8fd1\u306f JQuery\u3092\u4f7f\u308f\u306a\u304f\u306a\u3063\u305f\u3002<\/p>\n
\r\ndocument.addEventListener("DOMContentLoaded", function() {\r\n  const tables = document.querySelectorAll("table.myHover");      \/\/ \u30af\u30e9\u30b9\u6307\u5b9a\u3067\u8907\u6570\u30c6\u30fc\u30d6\u30eb\u3092\u5bfe\u8c61\r\n  if (!tables.length) return;\r\n  const color_on_R = "rgba(255, 230, 200, 0.5)";\r\n  const color_on_C = "rgba(200, 230, 255, 0.5)";\r\n  \/\/---------------------------------------------------------------------------->>> \u5168\u30c6\u30fc\u30d6\u30eb\u3092\u51e6\u7406\r\n  tables.forEach(function(table) {\r\n    const colgroup = table.querySelector("colgroup");\r\n    const cols = colgroup ? colgroup.children : [];\r\n    const rows = table.rows;\r\n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n    table.addEventListener("mouseover", function(e) {   \/\/ Mouse Over Event Handler\r\n      if (e.target.tagName === "TD" || e.target.tagName === "TH") {\r\n        const cell = e.target;\r\n        const rowIndex = cell.parentNode.rowIndex;\r\n        const colIndex = cell.cellIndex;\r\n        rows[rowIndex].style.backgroundColor = color_on_R;\r\n        if (cols[colIndex]) {\r\n          cols[colIndex].style.backgroundColor = color_on_C;\r\n        }\r\n      }\r\n    });\r\n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n    table.addEventListener("mouseout", function(e) {    \/\/ Mouse Out Event Handler\r\n      if (e.target.tagName === "TD" || e.target.tagName === "TH") {\r\n        const cell = e.target;\r\n        const rowIndex = cell.parentNode.rowIndex;\r\n        const colIndex = cell.cellIndex;\r\n        rows[rowIndex].style.backgroundColor = "";\r\n        if (cols[colIndex]) {\r\n          cols[colIndex].style.backgroundColor = "";\r\n        }\r\n      }\r\n    });\r\n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n    table.addEventListener("click", function(e) {       \/\/ Click Over Event Handler (Smapho, Tablet\u7528)\r\n      if (e.target.tagName === "TD" || e.target.tagName === "TH") {\r\n        clearAllHighlights();\r\n        const cell = e.target;\r\n        const rowIndex = cell.parentNode.rowIndex;\r\n        const colIndex = cell.cellIndex;\r\n        rows[rowIndex].style.backgroundColor = color_on_R;\r\n        if (cols[colIndex]) {\r\n          cols[colIndex].style.backgroundColor = color_on_C;\r\n        }\r\n      }\r\n    });\r\n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n    function clearAllHighlights() {                     \/\/ \u30cf\u30a4\u30e9\u30a4\u30c8\u8868\u793a\u5168\u89e3\u9664\r\n      for (let r of rows) {\r\n        r.style.backgroundColor = "";\r\n      }\r\n      for (let c of cols) {\r\n        c.style.backgroundColor = "";\r\n      }\r\n    }\r\n  });\r\n  \/\/----------------------------------------------------------------------------<<< \u5168\u30c6\u30fc\u30d6\u30eb\u3092\u51e6\u7406\r\n});\r\n<\/pre>\n
\r\n\/*\r\n\u3053\u306ecss\u306f\u30c6\u30fc\u30d6\u30eb\u3092\u898b\u3084\u3059\u304f\u3059\u308b\u305f\u3081\u3060\u3051\u306e\u3082\u306e\u3067\u3059\u3002\r\n\u884c\u30fb\u5217\u306e\u30cf\u30a4\u30e9\u30a4\u30c8\u6a5f\u80fd\u306b\u306f\u4e00\u5207\u95a2\u4fc2\u3057\u307e\u305b\u3093\u3002\r\n*\/\r\ntable{\r\n    border-collapse: collapse;\r\n}\r\ntd{\r\n    border: 1px #bbb solid;\r\n    font-size: 1.5rem;\r\n    padding:   0.5rem 1rem;\r\n}\r\n<\/pre>\n
3) \u5b9f\u88c5\u30b5\u30f3\u30d7\u30eb<\/h2>\n
\u4e0a\u8a18\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u4e00\u5f0f\u3092\u3053\u3061\u3089\u306b\u8a2d\u7f6e\u3057\u307e\u3057\u305f\u3002<\/p>\n
https:\/\/www.dogrow.net\/hp\/sample\/00163
\n\"\"<\/a><\/p>\n
\u30103\u3011\u6240\u611f<\/h1>\n
\u7279\u306b\u306a\u3057\u3002
\n\u7c21\u5358\u306b\u9069\u7528\u3067\u304d\u308b\u306e\u3067\u3001\u4eca\u5f8c\u306f\u9069\u7528\u500b\u6240\u3092\u601d\u3044\u3064\u3044\u305f\u3089\u6c17\u8efd\u306b\u7d44\u307f\u8fbc\u3093\u3067\u307f\u3088\u3046\u304b\u306a\u3002<\/p>\n
\n","protected":false},"excerpt":{"rendered":"
\u30101\u3011\u3084\u308a\u305f\u3044\u3053\u3068 \u3053\u3061\u3089\u306e\u30da\u30fc\u30b8\u306e\u3088\u3046\u306b\u3001\u30c6\u30fc\u30d6\u30eb\u4e0a\u3092\u30de\u30a6\u30b9\u30db\u30d0\u30fc\u3057\u305f\u6642\u306b\u3001\u30dd\u30a4\u30f3\u30c8\u3057\u3066\u3044\u308b\u884c\u3068\u5217\u306e\u80cc\u666f\u8272\u3092\u5909\u3048\u305f\u3044\u3002 https:\/\/baseball.yahoo.co.jp\/mlb\/stats\/batter?gam\u2026 \u7d9a\u304d\u3092\u8aad\u3080 »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,32],"tags":[],"class_list":["post-2587","post","type-post","status-publish","format-standard","hentry","category-htmlcss","category-javascriptjquery","category-php"],"views":615,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/comments?post=2587"}],"version-history":[{"count":7,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2587\/revisions"}],"predecessor-version":[{"id":2596,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2587\/revisions\/2596"}],"wp:attachment":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/media?parent=2587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/categories?post=2587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/tags?post=2587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}