テーブル幅の割合保存

2023年5月27日2023年5月27日 MJfr6SPbeaJRee8Y
<!DOCTYPE html>
<html>
<head>
    <title>sample</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="./jquery-resizable-columns-gh-pages/dist/jquery.resizableColumns.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/store.js/1.3.14/store.min.js"></script>
    <script src="./jquery-resizable-columns-gh-pages/dist/jquery.resizableColumns.min.js"></script>
    <style>
           table {
            width: 90%;
        }
        table, th, td {
            border: 1px solid #999;
            border-collapse: collapse;
        }

        textarea {
          resize: none; /* 手動リサイズを禁止 */
          min-height: 70px; /* 高さの最小値を指定（任意） */
          width: 100%;
        }
    </style>

    <script>
        $(function(){
            $("table").resizableColumns({
                store: window.store
            });
        });

        window.addEventListener("DOMContentLoaded", () => {
          // textareaタグを全て取得
          const textareaEls = document.querySelectorAll("textarea");

          textareaEls.forEach((textareaEl) => {
            // デフォルト値としてスタイル属性を付与
            textareaEl.setAttribute("style", `height: ${textareaEl.scrollHeight}px;`);
            // inputイベントが発生するたびに関数呼び出し
            textareaEl.addEventListener("input", setTextareaHeight);
          });

          // textareaの高さを計算して指定する関数
          function setTextareaHeight() {
            this.style.height = "auto";
            this.style.height = `${this.scrollHeight}px`;
          }
        });
    </script>

</head>
<body>
 <table data-resizable-columns-id="sample">
  <thead>
    <tr><th data-resizable-column-id="no">No</th>
        <th data-resizable-column-id="foo">foo</th>
        <th data-resizable-column-id="bar">bar</th>
        <th data-resizable-column-id="hoge">hoge</th>
    </tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>aaa</td><td>xxx</td><td><textarea style=" margin: 0px; padding: 0px; width: 100%; height: 100%; box-sizing: border-box;"></textarea></td></tr>
      <tr><td>2</td><td>bbb</td><td>yyy</td><td><textarea style=" margin: 0px; padding: 0px; width: 100%; height: 100%; box-sizing: border-box;"></textarea></td></tr>
      <tr><td>3</td><td>ccc</td><td>zzz</td><td><textarea style=" margin: 0px; padding: 0px; width: 100%; height: 100%; box-sizing: border-box;"></textarea></td></tr>
    </tbody>
  </table>
</body>
</html>