循環生成div並從數據庫填充它們

這是我想要實現的：！ http://i604.photobucket.com/albums/tt125/TheNameHobbs/client_workoutpage_example.png

我在填充了不同健身機的數據庫中有一張桌子。我需要這個循環爲數據庫中的每臺機器創建一個div，並將圖片與鏈接一起放入。該數據庫具有機器ID以及機器名稱，圖像路徑和視頻鏈接。

這就是我要創建的div：

function machine_count() { 
return mysql_result(mysql_query("SELECT COUNT(`machine_id`) FROM `machines` WHERE `machine_id` = $machine_id"), 0); 
} 

$(document).ready(function() { 
$machinecount = machine_count(); 
     for (var i = 0; i < $machinecount; i++) { 
      $('<div/>', { 
     'id': 'div' + i, 
     'class': 'some_class_name', 
     'html': 'i am div with id=div' + i 
     }).appendTo('.body1'); 
     } 
     });

CSS：

.body1 { 
width: 100%; 
} 
.some_class_name { 
width: 24.5%; 
float: left; 
border: 1px solid black; 
}

不知怎的，我需要在這個循環中添加的方式來獲取機器的圖片和鏈接，並填充它們相應地爲每個div。

任何想法？

來源

2013-05-15 TheNameHobbs

'mysql_query'和'mysql_result'是PHP函數，而不是使用Javascript。 – Barmar

你在混合使用PHP和javascript。 –

你在混合使用PHP和javascript。

試試這個：

//PHP CODE 
<?php 
function machine_count() { 
    return mysql_result(mysql_query("SELECT COUNT(`machine_id`) FROM `machines` WHERE `machine_id` = $machine_id"), 0); 
} 
?> 

//JAVASCRIPT CODE 
$(document).ready(function() { 
    $machinecount = <?php echo machine_count(); ?> 
    for (var i = 0; i < $machinecount; i++) { 
     $('<div/>', { 
     'id': 'div' + i, 
     'class': 'some_class_name', 
     'html': 'i am div with id=div' + i 
     }).appendTo('.body1'); 
    } 
});

確保您的文件具有PHP擴展和你的服務器上運行它。

來源

2013-05-15 18:50:27

'確保你的文件有php擴展名，並且你正在服務器上運行它'這讓我大笑 –

是的，我只是忘了添加php標籤。仍然不知道如何使用圖片填充divs – TheNameHobbs

好吧，讓你在PHP和jQuery之間做出區別？問題出自你的MYSQL語句。您不需要返回計數，而需要返回數據。所有這些都應該直接在php中完成。 –

結合您的JQUERY和PHP代碼

$(document).ready(function() { 

    <?php 

     $sql = "SELECT * FROM `machines` WHERE `machine_id` = $machine_id"; 
     $retval = mysql_query($sql, $conn); 
     if(! $retval) 
     { 
      die('Could not get data: ' . mysql_error()); 
     } 
     while($row = mysql_fetch_array($retval, MYSQL_ASSOC)) 
     { 
     ?> 
      $('<div/>', { 
        'id': 'div _<?php echo $row["machine_id"]; ?>', 
        'class': 'some_class_name', 
        'html': 'i am div with id=div '+ 
          '<?php echo $row["machine_id"]; ?>'+ 
          ' <?php echo $row["machine_name"]; ?>'+ 
          '<img src="PATH_TO_IMAGE/<?php echo $row["image_name"]; ?>" /> '+ 
          ' <?php echo $row["video_link"]; ?>' 
       }).appendTo('.body1'); 

    <?php } ?> 

});

來源

2013-05-15 19:16:22

和$ conn是連接數據庫的嗎？ – TheNameHobbs

@BradleyHobbs是 –

由於某種原因，我得到「無法獲取數據」 – TheNameHobbs

有兩種方法可以做到這一點，使用jquery或使用PHP。如果你想使用下面的腳本PHP中使用..

<?php 
    $i=0 
    $query=mysql_query("SELECT `machine_id`, `IMAGE_PATH`. `video_link` FROM `machines` WHERE `machine_id` = $machine_id") 
    while($rows=mysql_fetch_array($query)){ ?> 
    <div id= "<?php echo $i; ?>" class= "some_class_name"> i am div with id=div <?php echo $i; ?>> 
    <img src="<?php echo $rows[IMAGE_PATH]; ?>" alt="" /> 
    <a href="<?php echo $rows[video_link]; ?>">Video Link</a> 
    </div> 
    <?php $i++; } ?>

來源

2013-05-15 19:51:48 Pank

圖像路徑和鏈接也來自數據庫 – TheNameHobbs

我修改了東西只是使用這個..它會幫助你...如果你需要數...請告訴我... – Pank

-1

我終於想出了這個解決方案：

<script> 
     $(document).ready(function() { 

<?php 

    $count = mysql_result(mysql_query("SELECT COUNT(*) FROM `machines`"), 0); 
for ($machine_id = 0; $machine_id <= $count; $machine_id++) { 
    $sql = "SELECT * FROM `machines` WHERE `machine_id` = $machine_id"; 
    $retval = mysql_query($sql, $conn); 
    if(! $retval) 
    { 
     die('Could not get data: ' . mysql_error()); 
    } 
    while($row = mysql_fetch_array($retval, MYSQL_ASSOC)) 
    { 
    ?> 
     $('<div/>', { 
       'id': 'div _<?php echo $row["machine_id"]; ?>', 
       'class': 'some_class_name', 
       'html': '<img src="client workout page/round_<?php echo $row["machine_id"]; ?>.jpg" style="display:block;margin:0 auto;"><br>'+ 
         '<img src="<?php echo $row["picture"]; ?>" style="width:50%;display:block;margin:0 auto;"/> '+ 
         ' <a href="<?php echo $row["link"]; ?>"><img src="client workout page/click to play video.jpg" style="width:186px;height: 14px;position:absolute;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;"></a>' 
      }).appendTo('.body1');  
<?php } 
    } 
?> 

}); 
</script>

來源

2013-05-16 00:00:36 TheNameHobbs

循環生成div並從數據庫填充它們

回答

相關問題