javascript - 如何在 Javascript 中设置表格样式？

Question

我是一名初学者编码器，目前正在尝试使用 Javascript 制作一个比较表。一旦我将 html 插入到 Javascript 中的字符串中，它就不会在产品图像下方居中。我们将不胜感激一些帮助，非常感谢。

下面是我的 HTML、CSS 和 Javascript

< script type = "text/javascript" >

  var features = [];
features['product1'] = "<img src=\"images/product.png\" id=\"productImage\"alt=\"product image\"><li>R11 799</li><li>16GB</li><li>4.7 Inches</li><li>5.44 Inches x 2.64 Inches x 0.28 Inches</li><li>5.04 oz.</li><li>12 MP Rear / 5 MP Front</li><li>2015</li><li>Siri personal assistant</li><br></br>".replace(/"/g, "");
features['product2'] = "<img src=\"images/product2.png\" id=\"productImage\"alt=\"product image\"><table><tr><td class=\"rowTitle\">Price</td><td>R12 399</td></tr><tr><td class=\"rowTitle\">Memory</td><td>32/64/128 GB</td></tr><tr><td class=\"rowTitle\">Resolution</td><td>1440 x 2560 pixels</td></tr><tr><td class=\"rowTitle\">Dimensions</td><td>143.4 x 70.5 x 6.8 mm</td></tr><tr><td class=\"rowTitle\">Weight</td><td>138 g (4.87 oz)</td></tr><tr><td class=\"rowTitle\">Pixels</td><td>16 MP Rear / 5 MP Front</td></tr><tr><td class=\"rowTitle\">Model Year</td><td>2015</td></tr><tr><td class=\"rowTitle\">Special Features</td><td>Wireless charging</td></tr></table>".replace(/"/g, "");
features['product3'] = "<img src=\"images/product3.png\" alt=\"product image\"><li>R11 799</li><li>16GB</li><li>4.7 Inches</li><li>5.44 Inches x 2.64 Inches x 0.28 Inches</li><li>5.04 oz.</li><li>12 MP Rear / 5 MP Front</li><li>2015</li><li>Siri personal assistant</li><br></br>".replace(/"/g, "");
features['product4'] = "<img src=\"images/product4.png\" alt=\"product image\"><li>R11 799</li><li>16GB</li><li>4.7 Inches</li><li>5.44 Inches x 2.64 Inches x 0.28 Inches</li><li>5.04 oz.</li><li>12 MP Rear / 5 MP Front</li><li>2015</li><li>Siri personal assistant</li><br></br>".replace(/"/g, "");
features['product5'] = "<img src=\"images/product5.png\" alt=\"product image\"><li>R11 799</li><li>16GB</li><li>4.7 Inches</li><li>5.44 Inches x 2.64 Inches x 0.28 Inches</li><li>5.04 oz.</li><li>12 MP Rear / 5 MP Front</li><li>2015</li><li>Siri personal assistant</li><br></br>".replace(/"/g, "");
features['product6'] = "<img src=\"images/product6.png\" alt=\"product image\"><li>R11 799</li><li>16GB</li><li>4.7 Inches</li><li>5.44 Inches x 2.64 Inches x 0.28 Inches</li><li>5.04 oz.</li><li>12 MP Rear / 5 MP Front</li><li>2015</li><li>Siri personal assistant</li><br></br>".replace(/"/g, "");

function compareProducts(sel, suffix) {
  if (sel.value != "") {
    //header
    document.getElementById("header" + suffix).className = "selected";
    document.getElementById("header" + suffix).innerHTML = sel.options[sel.selectedIndex].text;

    //features
    document.getElementById("features" + suffix).className = "selected";
    document.getElementById("features" + suffix).innerHTML = features[sel.value];
  } else { //nothing selected, set to default
    //header
    document.getElementById("header" + suffix).className = "default";
    document.getElementById("header" + suffix).innerHTML = '';

    //features
    document.getElementById("features" + suffix).className = "default";
    document.getElementById("features" + suffix).innerHTML = '';
  }
} < /script>

@charset "UTF-8";



/* CSS Document */


* {
  font-family: aileron;
  text-decoration: none;
  color: #2A2A2A;
}


.logo {
  position: relative;
  display: block;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  text-align: center;
}
  

.default {
  font-style: bold;
  color: #262626;
}
.selected {
  font-style: normal;
  color: black;
}
#form {
  position: relative;
  display: block;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#vs {
  clear: both;
  display: inline-block;
  position: relative;
  width: 20%;
  max-width: 20%;
}
#dropDowns {
  display: block;
  position: relative;
  clear: both;
  margin-bottom: 4%;
}
.select1 {
  margin-left: 20%;
  float: left;
  clear: right;
}
.select2 {
  margin-right: 20%;
  float: right;
  clear: left;
}
#table {
  position: relative;
  width: 100%;
  max-width: 100%;
  top-margin: 6em;
  background-color: white;
  font-size: 22px;
  color: #0c3053;
  text-align: center;
  font-weight: 600;
  border: none;
}
.top-info {
  width: 50%;
  text-align: center;
}
.features-list li {
  font-size: 1.4em;
  font-weight: bold;
  width: 50%;
  padding: 25px 40px;
  /*border-color: #e6e6e6;
  border-style: solid;
  border-top-width: 1px;
  border-right-width: 1px;*/
  overflow: hidden;
  border: none;
}
@media only screen and (min-width: 1170px) {
  .features-list li {
    font-size: 1.6em;
  }
}

<!doctype html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Compare Products</title>

  <link href="style.css" rel="stylesheet" type="text/css">

</head>

<link rel="icon" type="images/favicon.png" href="images/favicon.png">

<body>

  <div class="logo">
    <img src="images/logo.png" alt="Logo" />
  </div>


  <form id="form">

    <div id="dropDowns">
      <select class="select1" name="selProduct1" onchange="compareProducts(this, 1);">
        <option value="">Select Product</option>
        <option value="product1">Apple iPhone 6S</option>
        <option value="product2">Sumsung Galaxy S6</option>
        <option value="product3">HTC One M9</option>
        <option value="product4">Moto X Pure Edition</option>
        <option value="product5">Samsung Galaxy Note 5</option>
        <option value="product6">Huawei Ascend P8 Lite</option>
      </select>

      <div id="vs">
        <img src="images/vs.png" alt="VS." />
      </div>

      <select class="select2" name="selProduct2" onchange="compareProducts(this, 2);">
        <option value="">Select Product</option>
        <option value="product1">Apple iPhone 6S</option>
        <option value="product2">Sumsung Galaxy S6</option>
        <option value="product3">HTC One M9</option>
        <option value="product4">Moto X Pure Edition</option>
        <option value="product5">Samsung Galaxy Note 5</option>
        <option value="product6">Huawei Ascend P8 Lite</option>
      </select>
    </div>


    <table id="table">
      <tr>
        <th id="header1" class="default"></th>
        <th id="header2" class="default"></th>
      </tr>

      <tr>
        <td id="features1" class="default"></td>
        <td id="features2" class="default"></td>
      </tr>
    </table>

  </form>

</body>

</html>

Answer 1

一些值得注意的事情

1. 列表项 (li) 应包含在 ul 或 ol 标记内。如果您希望它们无样式，请将 list-style-type 设置为 none(ul/ol)

2. 您的 css 中有“features-list li”，但没有“features”(这就是您的数组的名称)，并且 html 中没有任何功能列表的迹象

3. 您没有为您的 img 标签设置样式。这会有帮助!

解决上述问题，你就会到达目的地

问候

雷切尔