從html數據屬性循環並顯示javascript數組內容

Question

我有一個通過html數據元素傳遞的數組

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

數組包含一組不同的數組，它們的格式如下

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
)

數據正在傳遞給模態，如下所示。

<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個以上的條目，並且會不時變化。

我被困在需要獲取數字（數據）長度以及如何動態生成和標識的位置上

(<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從服務器中獲取數據。 這是一個指南