Question

实际上我正在创建一个Modal并且在模态中会显示一些动态数据，但我的问题是当我通过.html标记插入Modal主体时，我无法将我的对象Array迭代到.html标记中，< / p>

这是我的剧本：

  echo "<script>
function myFunction(order){
$('.modal-body').html('<table>'
+'<tr>'

+'<th>'+'<b>S.No</b>'+'</th>'
+'<th>'+'<b>Name</b>'+'</th>'
+'<th>'+'<b>Quantity</b>'+'</th>'
+'<th>'+'<b>Personalization</b>'+'</th>'

  +'</tr>'
   +'<tr>'
      var myOrder = order;    //Here is my problem i want to iterate my Order object here and populate the rows through this
      var arrayLength = myOrder.length;  

+'<td>'+'Bill Gates'+'</td>'
+'<td>'+'555 77 854'+'</td>'
+'<td>'+'Bill Gates'+'</td>'
+'<td>'+'555 77 854'+'</td>'
+'</tr>'
+'</table>');
$('#myModal').modal({backdrop: false}); 
}
</script>";

这是我的模态：

      //<!-- Modal -->
   echo"<div class='modal fade' id='myModal' role='dialog'>";
    echo"<div class='modal-dialog'>";

   //    <!-- Modal content-->

     echo"<div class='modal-content'>";
      echo"<div class='modal-header'>";
      echo"<button type='button' class='close' data-dismiss='modal'>&times;
    </button>";
      echo"<h4 class='modal-title'><center>Order Details</center></h4>";
    echo"</div>";
    echo"<div class='modal-body'>";

     // echo "Order Number : " . "<script> ('.modal-body').html(order.order_id) </script>" ."<br>";

    echo"</div>";
    echo"<div class='modal-footer'>";
      echo"<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>";
      echo"<button type='button' class='btn btn-default' >Update</button>";
   echo"</div>";
  echo"</div>";

   echo"</div>";
   echo"</div>";

Answer 1

我想你想要像

这样的东西

function myFunction(order) {
    var result = '<table>' // + '<tr>'... etc

    order.items.forEach(function(entry) {
        result += '<tr>'
                  + '<td>' + order.order_id + '</td>'  // Or whatever field is "S. no"
                  + '<td>' + entry.title + '</td>'
                  + '<td>' + entry.quantity + '</td>'
                  + '<td>' + (entry.personalization || '') + '</td>'
                + '</tr>';
    })

    result += '</table>';
    $('.modal-body').html(result);
}

在您有var myOrder = order的行中。另一方面，order对象只有一个order_id，所以对于所有内容都是一样的。

此文件也不需要更改，因此您不需要回显scape ，但可以用作javascript或<script>标记。

Answer 2

像这样使用。如果你使用加号和单引号脚本将无法正常工作。

echo "<script>
        function myFunction(order){
            $('.modal-body').html(<table>\
            <tr>\
            <th><b>S.No</b></th>\
            <th><b>Name</b></th>\
            <th><b>Quantity</b></th>\
            <th><b>Personalization</b></th>\
              </tr>\
               <tr>\
            <td>Bill Gates</td>\
            <td>555 77 854</td>\
            <td>Bill Gates</td>\
            <td>555 77 854</td>\
            </tr>\
            </table>);
            $(#myModal).modal({backdrop: false}); 
        }
        </script>";

像这样更新php变量..

echo "<script>
        function myFunction(order){
            $('.modal-body').html(<table>\
            <tr>\
            <th><b>S.No</b></th>\
            <th><b>Name</b></th>\
            <th><b>Quantity</b></th>\
            <th><b>Personalization</b></th>\
              </tr>\
               <tr>\
            <td>".$user."</td>\
            <td>".$phone."</td>\
            <td>".$name."</td>\
            <td>".$mobile."</td>\
            </tr>\
            </table>);
            $(#myModal).modal({backdrop: false}); 
        }
        </script>";

循环里面

$loop="";
for($i=1;$i<=5;$i++){
    $loop.="<tr><td>".$user."</td><td>".$phone."</td><td>".$name."</td><td>".$mobile."</td></tr>";
}
echo "<script>
        function myFunction(order){
            $('.modal-body').html(<table>\
            <tr>\
            <th><b>S.No</b></th>\
            <th><b>Name</b></th>\
            <th><b>Quantity</b></th>\
            <th><b>Personalization</b></th>\
              </tr>".$loop."</table>);
            $(#myModal).modal({backdrop: false}); 
        }
        </script>";

在Javascript中创建表

2 个答案: