Таблица циклов с javascript и считыванием значений внутри td

ProgramBox

Таблица циклов с javascript и считыванием значений внутри td

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

#javascript #html

#javascript #HTML

Вопрос:

У меня есть следующая HTML таблица, которую я пытаюсь просмотреть td's

 <table id="review-products">
<thead>
    <tr>
        <th>Product</th>
        <th class="currency">Base Value</th>
        <th class="currency">Unit Price</th>
        <th class="currency">Line Total</th>
        <th class="currency">Quantity</th>
    </tr>
</thead>
<tbody>
    <tr id="order-item-510" class="tst-orderItemRow">
            <td>
                <label for="Name">
                    Some Cool Description <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="Value">
                    10 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="UnitPrice">
                    $199.00 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="LineTotal">
                    $199.00 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <span class="read-only">
                    1 <!-- Get this -->
                </span>
            </td>
    </tr>
    <tr></tr>
</tbody>
</table>

и извлеките заданное значение с помощью следующего javascript.

 var table=document.getElementById('review-products');

for(var i=1; i<table.rows.length;i  ){

    var brand =(table.rows[i].cells[0]);
    var baseValue =(table.rows[i].cells[1]);
    var price =(table.rows[i].cells[2]);
    var total =(table.rows[i].cells[3]);
    var quantity =(table.rows[i].cells[4]);

    var string1 = brand   baseValue   price   total   quantity;

    console.log(brand);
}

К сожалению, поскольку у каждого td есть label тег или span тег, он не возвращает то, что я ожидаю, т.е. текст. Вместо этого html он возвращает мне то, что я пытался использовать innerHTML, однако это приводит к ошибке TypeError: невозможно прочитать свойство ‘innerHTML’ undefined.

Может кто-нибудь, пожалуйста, показать или рассказать мне, как я справляюсь с labels span тегами or, которые вложены внутри td's , чтобы я мог правильно извлекать значения.

Я могу использовать только javascript для этого.

1. var brand = table.rows[i].cells[0].querySelector("label").innerHTML (и обратите внимание, что вам не нужны круглые скобки, которые у вас есть в каждой строке).

2. @nnnnnn спасибо за информацию, однако при использовании querySelector я получаю следующую ошибку: не удается прочитать свойство querySelector неопределенного значения

3. Это из-за пустого tr в конце таблицы.

Ответ №1:

Используется Node.textContent для получения text контекста Node
Проверьте наличие table.rows[i].cells.length в цикле, так как у вас есть пустой <tr> элемент.

 var table = document.getElementById('review-products');

for (var i = 1; i < table.rows.length; i  ) {
  if (table.rows[i].cells.length) {
    var brand = (table.rows[i].cells[0].textContent.trim());
    var baseValue = (table.rows[i].cells[1].textContent.trim());
    var price = (table.rows[i].cells[2].textContent.trim());
    var total = (table.rows[i].cells[3].textContent.trim());
    var quantity = (table.rows[i].cells[4].textContent.trim());
    var string1 = brand   baseValue   price   total   quantity;
    console.log(string1);
  }
}

 <table id="review-products">
  <thead>
    <tr>
      <th>Product</th>
      <th class="currency">Base Value</th>
      <th class="currency">Unit Price</th>
      <th class="currency">Line Total</th>
      <th class="currency">Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr id="order-item-510" class="tst-orderItemRow">
      <td>
        <label for="Name">
          Some Cool Description
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <label for="Value">
          10
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <label for="UnitPrice">
          $199.00
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <label for="LineTotal">
          $199.00
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <span class="read-only">
                    1 <!-- Get this -->
                </span>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>

Ответ №2:

table.rows[i].cells[0] дает вам ссылку на сам td. Чтобы добраться до элементов label и span, которые вы можете использовать table.rows[i].cells[0].querySelector("label") , а для получения фактического текста вы можете использовать .innerHTML или .innerText .

Кроме того, хотя они не повредят, вам не нужны круглые скобки вокруг выражений с правой стороны в ваших назначениях.

Итак:

 var brand =(table.rows[i].cells[0]);

становится:

 var brand = table.rows[i].cells[0].querySelector("label").innerText;

И так далее.

Вам также нужно будет удалить пустой элемент tr в конце вашей таблицы, потому что в противном случае вы получите сообщение об ошибке, когда ваш цикл попытается получить доступ к его (несуществующим) ячейкам.

Разверните фрагмент, чтобы увидеть его в контексте:

Показать фрагмент кода

 var table=document.getElementById('review-products');

for(var i=1; i<table.rows.length;i  ){

    var brand = table.rows[i].cells[0].querySelector("label").innerText;
    var baseValue = table.rows[i].cells[1].querySelector("label").innerText;
    var price = table.rows[i].cells[2].querySelector("label").innerText;
    var total =table.rows[i].cells[3].querySelector("label").innerText;
    var quantity = table.rows[i].cells[4].querySelector("span").innerText;

    var string1 = brand   baseValue   price   total   quantity;

    console.log(string1);
}

 <table id="review-products">
<thead>
    <tr>
        <th>Product</th>
        <th class="currency">Base Value</th>
        <th class="currency">Unit Price</th>
        <th class="currency">Line Total</th>
        <th class="currency">Quantity</th>
    </tr>
</thead>
<tbody>
    <tr id="order-item-510" class="tst-orderItemRow">
            <td>
                <label for="Name">
                    Some Cool Description <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="Value">
                    10 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="UnitPrice">
                    $199.00 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="LineTotal">
                    $199.00 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <span class="read-only">
                    1 <!-- Get this -->
                </span>
            </td>
    </tr>
  
</tbody>
</table>

В качестве альтернативы, вы можете пропустить tds и использовать .querySelector() для получения нужных битов более напрямую:

 var brand = table.rows[i].querySelector('label[for="Name"]').innerText;

В контексте:

Показать фрагмент кода

 var table=document.getElementById('review-products');

for(var i=1; i<table.rows.length;i  ){
    var row = table.rows[i];
    var brand = row.querySelector('label[for="Name"]').innerText;
    var baseValue = row.querySelector('label[for="Value"]').innerText;
    var price = row.querySelector('label[for="UnitPrice"]').innerText;
    var total = row.querySelector('label[for="LineTotal"]').innerText;
    var quantity = row.querySelector('span.read-only').innerText;

    var string1 = brand   baseValue   price   total   quantity;

    console.log(string1);
}

 <table id="review-products">
<thead>
    <tr>
        <th>Product</th>
        <th class="currency">Base Value</th>
        <th class="currency">Unit Price</th>
        <th class="currency">Line Total</th>
        <th class="currency">Quantity</th>
    </tr>
</thead>
<tbody>
    <tr id="order-item-510" class="tst-orderItemRow">
            <td>
                <label for="Name">
                    Some Cool Description <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="Value">
                    10 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="UnitPrice">
                    $199.00 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="LineTotal">
                    $199.00 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <span class="read-only">
                    1 <!-- Get this -->
                </span>
            </td>
    </tr>
  
</tbody>
</table>

(Конечно, такие селекторы, как label[for="Name"] , немного уродливы, поэтому вы можете вместо этого присвоить этим элементам класс и использовать ...querySelector(".Name") или что-то еще — на ваше усмотрение.)

Ответ №3:

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

 <!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>


<table id="myTable">
  <tr id="order-item-510" class="tst-orderItemRow">
            <td>
                <label for="Name">
                    Some Cool Description <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="Value">
                    10 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="UnitPrice">
                    $199.00 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="LineTotal">
                    $199.00 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <span class="read-only">
                    1 <!-- Get this -->
                </span>
            </td>
    </tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
 {
    var table=document.getElementById('myTable');
    var brand = "";

    for(var i=0; i<table.rows.length;i  )
    {

          brand  = "<br/>"   (table.rows[i].cells[0].innerHTML);
          brand  = "<br/>"   (table.rows[i].cells[1].innerHTML);
          brand  = "<br/>"   (table.rows[i].cells[2].innerHTML);
          brand  = "<br/>"   (table.rows[i].cells[3].innerHTML);
    }

    document.getElementById("demo").innerHTML = brand;

}
</script>

</body>
</html>

Ответ №4:

Вы также можете использовать свойство .text() вместо этого в innerHTML оно выбирает значение внутри любого селектора, кроме входного тега.

 brand  = "<br/>"   (table.rows[i].cells[0].text);

Ответ №5:

Ваша проблема в том, что вы пытаетесь обойти вложенные элементы DOM (т. Е. Имеете дело с промежутками и тегами), но следующее, что вы знаете, у вас есть абзац внутри td, и у вас снова та же проблема.

Лучше решить вашу проблему с помощью совершенно другого подхода. Я предлагаю улучшить имена классов для элементов, которые вы хотите отслеживать. Вы уже на правильном пути с классом ‘currency’:

 <td class="currency">
  <label class="value" for="Value">10</label>
</td>
...
<td class="currency">
  <span class="value" class="read-only">
     1 
  </span>
</td>

var elements = document.querySelectorAll('.value')
elements.forEach(function(element) {
  console.log(element.textContent)
})