Как мне стилизовать таблицу в 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>

javascript

1

Nic B 17 Май 2016 в 20:46

Я бы не рекомендовал создавать необработанный HTML с помощью JavaScript. Вместо этого используйте document.createElement (), если вам действительно необходимо динамическое создание HTML с помощью JavaScript.

–

ManoDestra

17 Май 2016 в 21:01

Answer 1

Некоторые вещи стоит отметить

Элементы списка (li) должны содержаться в тегах ul или ol. Если вы хотите, чтобы они не были стилизованы, установите для list-style-type значение none (из ul / ol)
у вас есть 'features-list li' в вашем css, но нет 'features' (так называется ваш массив), и нет никаких признаков какого-либо списка функций в вашем html
У вас нет стиля для вашего тега img. Это поможет!

Исправьте вышеуказанное, и вы пойдете по местам

Отношении

Рейчел

0

Rachel Gallen 17 Май 2016 в 20:57

Пожалуйста, примите мой ответ, если это вам поможет ... вы можете сделать это, наведя указатель мыши на левую часть ответа. При наведении курсора появляется контур галочки. Когда вы щелкаете по нему, он становится зеленым, и ответ считается «принятым», плюс вы получаете 2 очка репутации .. Thx

–

Rachel Gallen

25 Май 2016 в 06:27

Answer 2

Вот хорошая ссылка. Вот несколько простых и коротких примеров.

Этот код является примером из приведенной выше ссылки:

<!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>

И похоже

enter image description here

-1

michael-mammut 17 Май 2016 в 21:47

1

Публикация ответов только по ссылкам не является хорошей практикой, поскольку ссылки разрываются. Разместите соответствующий код и укажите ссылку, по которой вы ее взяли, или воздержитесь

–

Rachel Gallen

17 Май 2016 в 21:13

Спасибо, Рэйчел! Я попробую то, что вы предложили, и посмотрю, сработает ли это :)

–

Nic B

24 Май 2016 в 20:34

Как мне стилизовать таблицу в Javascript?

2 ответа

Похожие вопросы

Новые вопросы

javascript