2

私は jquery mobile の初心者です。jquery mobile で動的にテーブル ビューを作成したいだけです。

私は多くの例を見つけましたが、すべて静的です.jqueryモバイルで(ul、li)または(tr td)を使用してテーブルビューを作成したいです。

黒丸の図に示すように、動的に作成されるこのタイプのテーブル ビューが必要です。

問題が発生したため、申し訳ありませんが、画像を添付できません。

私はこのコードを使用しましたが、テーブルを表示できません。ここに私のコードがあります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">


  <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">


  <link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">


  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/jquery.mobile-1.3.1.min.js"></script>
  <script src="js/jquery.mobile-1.3.1.min.js"></script>
  <script src="js/jquery.mobile-1.3.1.js"></script>

  <!-- Extra Codiqa features -->


</head>
<style>

  .ui-page {
  background : transparent url(img/Background-Screen.png) 0 0 no-repeat fixed !important;
  background-size : cover;
}

</style>


<body>



    <!--page one My Cases Screen------------->
  <div data-role="page" id="Home">
   <div data-role="header" data-theme="b">
  <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
  <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal"> 
  <a href="#" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b">Setting</a>
 <a href="#newevent1" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="dialog">Add</a>
 <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog">Edit</a>
  </div>
  </div>
    <div data-role="content">

    <p> Window content </p>  

  </div>   


  </div>






</body>


 <script >

 $(document).ready(function () {
 // $('.ui-loader').remove();
  $.mobile.loading('hide');

    var html = "";

html += "<div class=ui-grid-b>";

html +=   "<div class=ui-block-a>Element 1.1</div>";

html +=   "<div class=ui-block-b>Element 1.2</div>";

html +=   "<div class=ui-block-c>Element 1.3</div>";

html +=   "<div class=ui-block-a>Element 2.1</div>";

html +=   "<div class=ui-block-b>Element 2.2</div>";

html +=   "<div class=ui-block-c>Element 2.3</div>";

html += "</div>";

$("#home div:jqmData(role=content)").append (html);
});


</script>

</html>

ありがとう

4

1 に答える 1

1

うまくいけば、これがあなたを方向に導くでしょう。ここにデモがありますjsFiddle

私はこの配列を持っています:

[
 {
    "colorName": "red",
    "hexValue": "#f00"
 },
 {
    "colorName": "green",
    "hexValue": "#0f0"
 },
 .. so on
]

レスポンシブなテーブルに変換していますdata-role="table"。

詳細についてはDocs、jQuery Mobile を参照してください。

真剣に、これは単なる通常の jQueryappend()などです。これはインターネット上のどこでも見つけることができます :)

更新されたデモ:http://jsfiddle.net/hungerpain/7bym8/7/

于 2013-06-14T05:05:01.070 に答える