2

我是 jquery mobile 的初学者。我只想在 jquery mobile 中动态制作表格视图。？

我发现了很多例子，但都是静态的。我想在 jquery mobile 中使用 (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"响应性的表格。

有关更多信息，请查看DocsjQuery Mobile。

说真的，这只是普通的 jQueryappend()等。你可以在互联网上的任何地方找到它 :)

更新演示：http://jsfiddle.net/hungerpain/7bym8/7/

于 2013-06-14T05:05:01.070 回答