Question

我有一个通过html数据元素传递的数组

  <button type="button" class="open-my-modal btn btn-primary" 
data-number="'.htmlspecialchars(json_encode($myArray), ENT_QUOTES, 'UTF-8')

Array包含一组不同的数组，其格式如下

Array(
  [0] => ABC
  [1] => DEF
  [2] => GHI
  [3] => JKL
 )
Array(
 [0] => MNO
 [1] => 123A
 [2] => 123B
 [3] => 123C
)
Array(
[0] => orange
[1] => yellow
[2] => green
[3] => blue
)

数据传递给模式，如字段ID如下所示

<tr>
    <td><span id ="exampleone"></span></td>
    <td><span id ="exampletwo"></span></td>
    <td><span id ="examplethree"></span></td>
    <td><span id ="examplefour"></span></td>
</tr>

和一个链接id和数据的脚本

<script>

$(document).ready(function () {             
$(".open-my-modal").click(function(){
  $("#exampleone").html($(this).data("number")[0]);

这会在屏幕上正确显示ABC，DEF，GHI，JKL。但我想动态地做到这一点。例如

<td><span id ="exampleone"></span></td> <!-- output will be ABC-->
<td><span id ="exampleone"></span></td><!-- output will be DEF-->
etc, etc

我动态地提取数据，因此每个数组可能有超过4个条目，它会不时变化。

我被困在需要获取数字（数据）长度以及如何动态生成和ID的位置

(<td><span id ="dynamically generated">)

然后如何动态链接id与正确的

data($("#number").html($(this).data("number"));)

Answer 1

要动态生成列表中的项目，您可以使用以下代码

HTML （替换您的代码）

<tr id="parentNode"></tr>

JavaScript （放入jQuery代码中）

$.each($(this).data('number'), function(index, value){ $("#parent").append($('<td>').append($('<span>', {'id' : 'example' + index , 'text' : value}))); });

这将生成<td><span id=example1>value1</span></td>，依此类推。

我强烈建议您使用AJAX从服务器获取数据。这是guide

从html数据属性循环并显示javascript数组内容

1 个答案: