Question

// 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');

我得到了全部藏品。脚本放置在body结束标签的body末尾。该表（由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;
  };

Answer 1

对于那些像我一样从文件中动态生成html表（在这种情况下为csv）并且不知道如何处理（由于脚本运行时尚不可用）无法动态生成元素的情况的人：

确保您在html中声明这些元素。解析完成后，而不是对DOM使用APPEND，而是使用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（）提取数据并生成表，请对代码进行重组以考虑到调用的异步特性。这可能意味着从d3.csv（）调用内部处理所有逻辑

Answer 2

使用querySelectorAll代替getElementByTagName，这将创建一个数组。

无法检索HTML集合长度

2 个答案: