Question

'<table> 
    <tr>
        <th>' .$varProduct[$x][0].  '</th>'.  //this is a title
       '<th>' .$varProduct[$x][2] . $varProduct[$x][11] . ' </th> // this is a price
    </tr>
</table>'

此代码生成一个表格，如下所示：

Title Price
Title Price
Title Price

但我想填写它

Title Title Title
Price Price Price

我可以用一些库或CSS样式做到这一点我知道这不是DOM通常如何对齐元素。

好的，现在就像这样

Title Title Title Title   //uses up the whole page so goes to next linke
Title Price Price PRice 
PRice

我希望它去

Title Title Title TItle
PRice PRice PRice PRice
Title 
PRice

Answer 1

我认为你想要一个只有两行的表。第一行包含产品的标题，底行包含价格。正如@scunliffe所说的关于标题的循环然后是价格。

print "<table><tr>";

foreach ($varProduct as $value){
    print  "<td>".$value[0]."</td>";
}

print '</tr><tr>';

foreach ($varProduct as $value){
    print  "<td>".$value[2].$value[11]."</td>";
}

print "</td></table>";

Answer 2

相应地更新fiddle但使用JS。它应该给你一个想法。

HTML

<div id="dynamic">

</div>

JS

var priceList = [ 'price1', 'price2', 'price3'];
var itemList = [ 'item1', 'item2', 'item3' ];

$('#dynamic').append('<table><caption>DYNAMIC</caption><tr>');   
for (var i=0; i<3; i++){

    $('#dynamic').append('<td>' + itemList[i] + '</td>');
}
$('#dynamic').append('</tr><tr>');

for (var i=0; i<3; i++){

    $('#dynamic').append('<td>' + priceList[i] + '</td>');
}
$('#dynamic').append('</tr></table>');

<强>更新

更新输出

DYNAMIC
item1   item2   item3   item4
price1  price2  price3

请查看updated fiddle

按列而不是行填充html表？

2 个答案: