时间戳

首页 > 解决方案 > 根据父页面的计数在网页上动态生成标签和子标签

javascript - 根据父页面的计数在网页上动态生成标签和子标签

问题描述

我有一个索引页，记录用例（1-4）的数量，记录没有。每个用例的场景（1-x），每个场景都有一组相同的输入字段。

考虑到我在 javascript 变量中有上述数字，如何根据索引页面中给出的值动态加载第二页。

我们定义用例和否的索引页面。的场景。

根据索引页中的用例和场景数量加载页面的第二页

用例标签：

    <ul role="tablist" class="ibm-tabs" aria-label="Tab navigation">
          <li role="presentation"><a role="tab" href="#">Usecase 1</a></li>
          <li role="presentation"><a role="tab" href="#">Usecase 2</a></li>
          <li role="presentation"><a role="tab" href="#">Usecase 3</a></li>
          <li role="presentation"><a role="tab" href="#">Usecase 4</a></li>
        </ul>

场景：

            <li><a aria-selected="true" role="tab" href="#example2b-tab1">Intro Page</a></li>
            <li><a role="tab" href="#example2b-tab2">Scene 1</a></li>
            <li><a role="tab" href="#example2b-tab3">Scene 2</a></li>
            <li><a role="tab" href="#example2b-tab4">Scene 3</a></li>
            <li><a role="tab" href="#example2b-tab5">Scene 4</a></li>
        </ul>
    </div>
</div>
<!-- Tabs content body with tab contents divs inside a 4-3: -->
<div class="ibm-col-4-3 ibm-col-medium-5-3">
    <div id="example2b-tab1" class="ibm-tabs-content">
      <label for="__REPLACE_ME_1__" class="ibm-textcolor-green-60">Use case description<span class="ibm-required">*</span></label>
      <span>
        <input type="text" value="" size="70" id="first_name" name="first_name" required>
      </span>

标签： javascripthtmljquerycss

解决方案

如果您只是为演示而工作并且只想使用前端，那么您必须使用 javascript 变量将值存储在索引页面中，然后在前端生成带有循环的页面。

看这个例子

但是对于真正的功能......它可以从服务器端轻松完成。

在可以实际设置值的索引页面中。可以使用 POST 请求获取这些值。

使用这些值，接收到的服务器使用 for 循环或其他方式生成下一页，然后返回该页面。

您可能还希望将这些值存储为服务器端特定客户端的会话变量。

请参阅此示例以使用 jinja 和烧瓶在服务器端执行循环操作

推荐阅读