// 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');
我得到了完整的收藏。脚本放置在正文末尾标记之前的正文末尾。该表（由c3.v文件中的D3.js动态生成）放在脚本之前。我知道这些症状是在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;
};
对于那些像我一样从文件（在本例中为csv）动态生成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（）调用内部处理所有逻辑
使用querySelectorAll而不是getElementByTagName，这将创建一个数组。