Question

我是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>

由于

Answer 1

希望这会引导您前进。这是 jsFiddle

的演示

我有这个阵列：

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

我正在转换为具有data-role="table"响应的表格。

有关更多信息，请查看jQuery Mobile上的 Docs 。

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

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

如何在加载时在jquery中动态创建表视图

1 个答案: