Question

我从多个选择2下拉菜单中获得了价值像这样的值

var color =  [Red,Black];
var size = [41,42,43];

我想使用JavaScript或JQuery以表格大小和颜色显示。

结果应该是这样

<table>
  <tr>
    <th>COlor</th>
    <th>Size</th>
  </tr>
  <tr>
    <th>Red</th>
    <th>41</th>
  </tr>
  <tr>
    <th>Red</th>
    <th>42</th>
  </tr>
  <tr>
    <th>Red</th>
    <th>43</th>
  </tr>
    <th>Black</th>
    <th>41</th>
  </tr>
  <tr>
    <th>Black</th>
    <th>42</th>
  </tr>
  <tr>
    <th>Black</th>
    <th>43</th>
  </tr>
</table>

Answer 1

具有此HTML：

<html>
<body>
<table id="myTable">
<tr>
  <th>
    Color
  </th>
  <th>
    Size
  </th>
</tr>
</table>
</body>
</html>

您必须循环使用每个可能的值

jQuery(document).ready(function(){
  var color =  ["Red","Black"];
  var size = [41,42,43];

  var table = jQuery("#myTable");
  for(var i=0; i<color.length; i++){
    for(var j=0; j<size.length; j++){
        var row = "<tr><td>"+color[i] + "</td><td>" + size[j] +"</td></tr>"
      table.append(row)
    }
  }
})

输出将是：


Color   Size
Red     41
Red     42
Red     43
Black   41
Black   42
Black   43

显示产品颜色和产品尺寸

1 个答案: