Question

<!doctype html>
<html>
<head>
    <title>Novar App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <body>
 <div data-role="page" id="home">
<div data-role="header">
<h1>site Details</h1>
</div>

<div data-role="content">

<a href="#Site entry1" data-role="button" data-inline="true">Enter the details of site</a>

<a href="#Modify site" data-role="button" data-inline="true">Modify site details</a>

</div>

 </div>

<div data-role="page" id="Site entry1">

<div data-role="header">
    <a href="#home" data-rel="back" data-role="button" data-icon="home">Home</a>
    <h1>Welcome To enter the details of site</h1>
    </div>


<div data-role="content">
    <div class="content-primary">
    <form>
    <ul data-role="listview">
        <li data-role="fieldcontain">
            <label for="sitename">Site name:</label>
            <input type="text" sitename="name" id="sitename" value=""  />
        </li>
        <li data-role="fieldcontain">
            <label for="siteno">Site name:</label>
            <input type="text" siteno="siteno" id="siteno" value=""  />
        </li>

        <a href="#Site entry2" data-role="button" data-inline="true">Next</a>

    </ul>

    </form>
    </div>


</div>
</div>

<div data-role="page" id="Site entry2">

    <div data-role="header">
    <a href="#Site entry1"  data-role="button" data-icon="back">previous</a>
    <h1>Welcome To enter the module details of site</h1>
    </div>


    <div data-role="content">
        <div class="content-primary">
        <form>
        <ul data-role="listview">
            <li data-role="fieldcontain">
                <label for="moduleno">name:</label>
                <input type="text" modulename="moduleno" id="moduleno" value=""  />
            </li>
            <li class="ui-body ui-body-b">
                <fieldset class="ui-grid-a">
                        <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
                    </fieldset>
            </li>

        </ul>

        </form>
        </div>
    </div>
    <div data-role="footer">
    <a href="#Site entry3" data-role="button" data-icon="arrow-r">Next</a>
    </div>


</div>

<div data-role="page" id="Site entry3">

    <div data-role="header">
    <a href="#Site entry2" data-rel="back" data-role="button" data-icon="back">previous</a>
   <h1>Welcome To enter the exe details of site</h1>
    </div>


    <div data-role="content">
        <div class="content-primary">
        <form>
        <ul data-role="listview">
            <li data-role="fieldcontain">
                <label for="modulename">name:</label>
                <input type="text" name="name" id="name" value=""  />
            </li>

            <li class="ui-body ui-body-b">
                <fieldset class="ui-grid-a">
                        <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
                    </fieldset>
            </li>

        </ul>

        </form>
        </div>
    </div>
    <div data-role="footer">
    <a href="#home"  data-role="button" data-icon="home">Home</a>
    </div>

</div>

<div data-role="page" id="Modify site">

    <div data-role="header">
    <a href="home" data-rel="back" data-role="button" data-icon="home">Home</a>
    <h1>List of sites </h1>
    </div>

    <div data-role="content">
    </div>

    <div data-role="footer">
    </div>
</div>
</body>
</html>

我需要创建一个列表，其中包含来自不同页面中的多个列表的所有字段。可以使用jquery完成吗？

我尝试过像这样的代码

 var listItemHtml = 
    '<li class="siteEntry">' +
      '<a class="siteName">{siteName}</a>' +
      '<a class="siteNo">{siteNo}</a>' +
      '<a class="doneButton" data-icon="check"></a>' +
    '</li>';

   function makeListItem(site) {
    var html = listItemHtml.patternReplace({ 
          siteName: site.getSiteName(),
          siteNo: site.getSiteNo(),
          moduleNo: site.getModuleNo(),
          executiveNo: site.getExecutiveNo()
         }),
        li = $(html);
    li.find('a.doneButton').attr('id', site.getName());
    return li;
  }

但是所有列表都没有附加到单个列表中。 Plz帮助我提前谢谢。

Answer 1

我在页面“Site entry3”上添加了按钮ID

<button id="btn_entry3" type="submit" data-theme="a">Submit</button>

在“修改网站”页面上添加了内容id = content

<script>
    $("#btn_entry3").click(function(){
        var li = '<ul data-role="listview" >';
        $('body').find('[data-role="fieldcontain"]').each(function(key, value){         
            var title = $(this).find('label').html();  
            var val = $(this).find('[type="text"]').val();     
            li += '<li>'+title+' '+val+'</li>';
        });
        li +='</ul>';           
        $('#content').html(li).trigger('create');
         $('ul').listview('refresh');
    })
</script>

如何将不同页面中的多个列表附加到单个列表中？

1 个答案: