Невозможно отобразить все значения в таблице html

ProgramBox

Невозможно отобразить все значения в таблице html

Post author:admin
Запись опубликована:14 марта, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

По неизвестным мне причинам я не могу отобразить значение last ( sProductLink ) в этой таблице :

 <thead>
    <tr>
        <th>Id</th>
        <th>Product Name</th>
        <th>Brand</th>
        <th>Price</th>
        <th>Link</th>
    </tr>
</thead>

Я не вижу никаких причин для этой проблемы. HTML-код такой же, как и для других элементов.
Когда я смотрю в DOM, я вообще не вижу «Ссылку» <td> , что означает, что она по какой-то причине не добавлена.

Вот код для этого. Я буду очень признателен, если кто-нибудь взглянет на это.

   $("#lblEditDeleteProducts").append('<tr><th class="idDom" scope="row">'
     sProductId "<span data-i-user-id='"
     sProductId "'</span>"
     "<button type='button' id='editBtn' class='btn btn-warning editBtn' data-toggle='modal' data-target='#myModal'>Edit</button>"
      "<button id='deleteBtn' class='btn btn-danger deleteBtn'>Delete</button>"
     '</th><td class="nameDom">'
     sProductName '</td><td class="brandDom">'
     sProductBrand '</td><td class="priceDom">'
     sProductPrice '</td><td class="linkDom">'
     sProductLink '</td></tr>');

P.S. Я также был бы признателен за любые советы о том, как я могу сделать то, что я делаю здесь, альтернативным (лучшим) способом. Без всяких апострофов и так далее.

1. Говорит ли вам что-нибудь консоль javascript?

2. Значение есть, когда я утешаю. запишите это.

3. «Без всех этих апостроф и т. Д.» , Вы могли бы, по крайней мере, начать с того, что были последовательны в сопоставлении ' и " . Это было бы гораздо менее запутанно. Но лучшим подходом является использование любой из различных библиотек, обеспечивающих привязку данных

4. Как на самом деле выглядит сгенерированный HTML-код?

5. Ваши теги искажены прямо здесь "<span data-i-user-id='" sProductId "'</span>" , у которых сначала <span нет окончания >

Ответ №1:

Эта часть вашей строки:

 "<span data-i-user-id='"  sProductId "'</span>"

Вероятно, должно быть:

 "<span data-i-user-id='"  sProductId "'></span>"

Вот почему создание HTML с помощью конкатенации строк — это колоссальная боль.

Ответ №2:

В области, где указывает череп 💀, не больше скобки > , чтобы закрыть внутреннюю часть <span> .

 $("#lblEditDeleteProducts").append(
'<tr>
  <th class="idDom" scope="row">' sProductId '
  <span data-i-user-id="' sProductId '"💀</span>
  <button type="button" id="editBtn" class="btn btn-warning editBtn" data-toggle="modal" data-target="#myModal">
  Edit
  </button>
  <button id="deleteBtn" class="btn btn-danger deleteBtn">
  Delete
  </button>
  </th>
  <td class="nameDom">' sProductName '</td>
  <td class="brandDom">' sProductBrand '</td>
  <td class="priceDom">' sProductPrice '</td>
  <td class="linkDom">' sProductLink '</td>
  </tr>');

ФРАГМЕНТ

 var sProductId = 'sProd01';
var sProductName = 'sProExtreme';
var sProductBrand = 'sPro™';
var sProductPrice = 54.99;
var sProductLink = 'http://shop.spro.com';

$("#lblEditDeleteProducts").append('<tr><th class="idDom" scope="row">'   sProductId   '<span data-i-user-id="'   sProductId   '"></span><button type="button" id="editBtn" class="btn btn-warning editBtn" data-toggle="modal" data-target="#myModal">Edit</button><button id="deleteBtn" class="btn btn-danger deleteBtn">Delete</button></th><td class="nameDom">'   sProductName   '</td><td class="brandDom">'   sProductBrand   '</td><td class="priceDom">'   sProductPrice   '</td><td class="linkDom">'   sProductLink   "</td></tr>");

 table {
  border: 5px inset orange;
}
tr {
  background: rgba(0, 0, 0, .7);
}
th {
  border: 5px dashed green;
  color: yellow;
}
td {
  border: 2px inset blue;
  color: cyan;
}

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/g/fontawesome@4.6.3,bootstrap@3.3.7(css/bootstrap.min.css css/bootstrap-theme.min.css)">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="lblEditDeleteProducts"></table>

Ответ №3:

Я настоятельно рекомендую вам написать HTML, который вы пытаетесь добавить, внутри редактора, с разнесением, чтобы вы могли правильно видеть структуру и отлаживать оттуда. Впоследствии вы можете минимизировать его и протестировать, чтобы убедиться, что он в рабочем состоянии.

     <tr>
        <th class="idDom" scope="row">
              sProductId  
            <span data-i-user-id='" sProductId "'><!-- Closing '>' added (Thanks Matt) --></span>
            <button type='button' id='editBtn' class='btn btn-warning editBtn' data-toggle='modal' data-target='#myModal'>
                Edit
    </button>
            <button id='deleteBtn' class='btn btn-danger deleteBtn'>
                Delete
            </button>
        </th>
        <td class="nameDom">
              sProductName  
        </td>
        <td class="brandDom">
              sProductBrand  
        </td>
        <td class="priceDom">
              sProductPrice  
        </td>
        <td class="linkDom">
              sProductLink  
        </td>
    </tr>

Не забывайте о "" пометках вокруг вашего HTML