1

例

Divページ http://www.uller.com/dump/ajaxresponseissue/index.html

ソースコード、直接アクセスすれば正常に動作し ますhttp://www.uller.com/dump/ajaxresponseissue/table.html

テーブルを動的にDivテーブルに表示すると、レスポンシブスクリプトが作成されますが、divが読み込まれると、ウィンドウがサイズ変更されるまでスクリプトは実行されません。

divのロード時にスクリプトを自動トリガーする方法を見つけようとしています。

以下は、そのリンクのコード例です。

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Response Issuet</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" language="javascript"></script>
</head>
<body>
    <div id="output"></div>
    <script>
    // Function called by Period select
        $(document).ready(function () {
            $("#output").load("table.html #loadMeOnly");$.getScript('responsibe-tables.js');$.getScript('jquery.js');
        });
    </script>    
</body>
</html>

テーブルjsと呼ばれる

<div id="loadMeOnly">
<style type="text/css">

table th { font-weight: bold; }
table td, table th { padding: 9px 10px; text-align: left; }

/*  Mobile */
@media only screen and (max-width: 979px) {

    table.responsive { margin-bottom: 0; }

    .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
    .pinned table { border-right: none; border-left: none; width: 100%; }
    .pinned table th, .pinned table td { white-space: nowrap; }
    .pinned td:last-child { border-bottom: 0; }

    div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
    div.table-wrapper div.scrollable table { margin-left: 35%; }
    div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }  

    table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
    table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }

}
</style>

<table width='100%' class="responsive">
  <tr>
    <th scope='col'>&nbsp;</th>
    <th colspan='3' scope='col'><center>
        Invited
      </center></th>
    <th colspan='2' scope='col'><center>
        Accepted
      </center></th>
    <th colspan='2' scope='col'><center>
        Confirmed
      </center></th>
    <th colspan='2' scope='col'><center>
        Attended
      </center></th>
    <th scope='col'><center>
        Sold
      </center></th>
  </tr>
  <tr>
    <th scope='col'>Name</th>
    <th scope='col'>P</th>
    <th scope='col'>G</th>
    <th scope='col'>Total</th>
    <th scope='col'>##</th>
    <th scope='col'>%</th>
    <th scope='col'>##</th>
    <th scope='col'>%</th>
    <th scope='col'>##</th>
    <th scope='col'>%</th>
    <th scope='col'>##</th>
  </tr>
  <tr>
    <td> House</td>
    <td onclick='document.location = "?Databuild&Account=28&Type=P";' style='cursor:pointer;'></td>
    <td onclick='document.location = "?Databuild&Account=28&Type=G";' style='cursor:pointer;'>1</td>
    <td onclick='document.location = "?Databuild&Account=28";' style='cursor:pointer;'>1</td>
    <td></td>
    <td>0%</td>
    <td></td>
    <td>0%</td>
    <td></td>
    <td>0%</td>
    <td></td>
  </tr>
  <tr>
    <td>ss ss</td>
    <td onclick='document.location = "?Databuild&Account=68&Type=P";' style='cursor:pointer;'>9</td>
    <td onclick='document.location = "?Databuild&Account=68&Type=G";' style='cursor:pointer;'>32</td>
    <td onclick='document.location = "?Databuild&Account=68";' style='cursor:pointer;'>41</td>
    <td></td>
    <td>0%</td>
    <td></td>
    <td>0%</td>
    <td></td>
    <td>0%</td>
    <td></td>
  </tr>
  <tr>
    <td>xx xx</td>
    <td onclick='document.location = "?Databuild&Account=70&Type=P";' style='cursor:pointer;'></td>
    <td onclick='document.location = "?Databuild&Account=70&Type=G";' style='cursor:pointer;'>28</td>
    <td onclick='document.location = "?Databuild&Account=70";' style='cursor:pointer;'>28</td>
    <td></td>
    <td>0%</td>
    <td></td>
    <td>0%</td>
    <td></td>
    <td>0%</td>
    <td></td>
  </tr>
  <tr>
    <td>vv vv</td>
    <td onclick='document.location = "?Databuild&Account=101&Type=P";' style='cursor:pointer;'>1</td>
    <td onclick='document.location = "?Databuild&Account=101&Type=G";' style='cursor:pointer;'>28</td>
    <td onclick='document.location = "?Databuild&Account=101";' style='cursor:pointer;'>29</td>
    <td></td>
    <td>0%</td>
    <td></td>
    <td>0%</td>
    <td></td>
    <td>0%</td>
    <td></td>
  </tr>
  <tr>
    <td>yy  yy</td>
    <td onclick='document.location = "?Databuild&Account=136&Type=P";' style='cursor:pointer;'>2</td>
    <td onclick='document.location = "?Databuild&Account=136&Type=G";' style='cursor:pointer;'>19</td>
    <td onclick='document.location = "?Databuild&Account=136";' style='cursor:pointer;'>21</td>
    <td></td>
    <td>0%</td>
    <td></td>
    <td>0%</td>
    <td></td>
    <td>0%</td>
    <td></td>
  </tr>
  <tr>
    <td><strong>Total</strong></td>
    <td onclick='document.location = "?Databuild&Account=All&Type=P";' style='cursor:pointer;'>12</td>
    <td onclick='document.location = "?Databuild&Account=All&Type=G";' style='cursor:pointer;'>108</td>
    <td onclick='document.location = "?Databuild&Account=All";' style='cursor:pointer;'>120</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
  </tr>
</table>
</div>
4

0 に答える 0