невозможно получить длину HTML-коллекции - PullRequest
Новая
       5

невозможно получить длину HTML-коллекции

0 голосов
/ 13 апреля 2019 

// this sets the inventory figures

function ricercaInCol(tableId,colonna,value){

    const table = document.getElementById('table'); 
    const n_colonne = table.getElementsByTagName('th').length;
    document.write(n_colonne);
    const celle = table.getElementsByTagName('td');
    let contatore = 0;
    let occurrMatch = 0;
    for(let j=colonna; j<celle.length; j=(j+n_colonne)){
         if(celle[j].innerText.match(value)){
           occurrMatch++;
           contatore++;
         }
    }
    return occurrMatch;
  };
  ricercaInCol(table,3,'G7');
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: beige;
}
button {
    margin-left: 10px;
}
h1 {
    text-align: center;
}
h2 {
    text-align: center;
}
a {
    text-decoration: none;
}
a:hover {
    color: brown;
}
table {
    border-collapse: collapse;
}  
td {
    border: 1px solid black;
    text-align: center;
}
th {
    background-color: #4CAF50;
    border: 1px solid white;
    text-align: center;
    color: white;
    padding: 10px;
}
tr:nth-child(odd) {
		background-color: rgb(198, 244, 209);
        color:black;
}
.trAlternate {
    background-color: rgb(108, 117, 202);
        color:black;
}
tr:hover {background-color: #f5f5f5;}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hardware Inventory</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    <h1>INVENTORY TEST</h1>
    <h2></h2>
    <table id="table" class="sortable"></table>

<script src="js/d3.min.js"></script>
<script src="js/d3run.js" charset="utf-8"></script>
<script src="js/sorttable.js" charset="utf-8"></script>
<script src="js/inventory.js" charset="utf-8"></script>
</body>
</html>

У меня есть функция, которая должна получить длину HTML-коллекции. Однако, когда я бегу: 

const n_colonne = document.getElementsByTagName('th').length;

возвращаемое значение равно 0. В то время как я иду с: 

const n_colonne = document.getElementsByTagName('th');

Я получаю полную коллекцию. Сценарий размещается в конце тела непосредственно перед тегом конца тела. Таблица (динамически генерируемая D3.js из CSV-файла) помещается задолго до сценария. Я знаю, что эти симптомы типичны для сценариев, которые загружаются до того, как DOM завершит рендеринг элементов. Но это не так. Я не понимаю, как это может произойти. 

function ricercaInCol(tableId,colonna,value){
    const table = document.getElementById('tableId'); 
    const n_colonne = table.getElementsByTagName('th').length;
    const celle = table.getElementsByTagName('td');
    let contatore = 0;
    let occurrMatch = 0;
    for(let j=colonna; j<celle.length; j=(j+n_colonne)){
         if(celle[j].innerText.match(value)){
           occurrMatch++;
           contatore++;
         }
    }
    return occurrMatch;
  };

Ответы [ 2 ]

0 голосов
/ 14 апреля 2019

для тех, кто, как и я, генерирует html-таблицу динамически из файла (в данном случае csv) и не знает, как обрабатывать (пока) ситуации, когда динамически генерируемые элементы недоступны для выбора, поскольку еще не доступны при запуске сценария:

  • убедитесь, что вы указали эти элементы в html.Пока синтаксический анализ завершен, вместо использования APPEND для DOM используйте вместо этого SELECT (существующие элементы) и передайте им данные.В моем случае я не смог выбрать теги th и вставить их в html.Таким образом, функция, которая генерирует таблицу, может выглядеть так: 

     var tabulate = function (data,columns) {
var table = d3.select('#table'); // here select rather than append
  var thead = table.select('thead') // here select rather than append
  var tbody = table.select('tbody') // here select rather than append

  thead.select('tr') // here select rather than append
    .selectAll('th')
      .data(columns)
      .text(function (d) { return d })

  var rows = tbody.selectAll('tr')
      .data(data)
      .enter()
    .append('tr')

  var cells = rows.selectAll('td')
      .data(function(row) {
          return columns.map(function (column) {
              return { column: column, value: row[column] }
        })
    })
    .enter()
  .append('td')
    .text(function (d) { return d.value })

return table;

    }

Кроме того ... Я обнаружил, что d3.csv (), следовательно, асинхронныйесли вы используете его для извлечения данных и создания таблицы, реструктурируйте свой код, чтобы учесть асинхронный характер вызова.Это может означать обработку всей вашей логики из вызова d3.csv ()

0 голосов
/ 13 апреля 2019

используйте querySelectorAll вместо getElementByTagName, это создаст массив.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...