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

有些值得注意的事情

列表项（li）应包含在ul或ol标记中。如果你想要它们没有样式，请将list-style-type设置为none（ul / ol）
你的css中有'features-list li'，但没有'features'（这就是你的数组被称为），而你的html中没有任何feature-list的迹象
< / LI>
您没有为img标记设置样式。那会有所帮助！

修正上述内容，你将会去的地方

此致

拉结

Answer 2

这是一个很好的link。有一些简短易行的例子。

此代码是上述链接中的示例：

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>

<h2>Colored Table Header</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

看起来像

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

2 个答案: