// 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;
};
对于那些像我一样从文件（在这种情况下为 csv）动态生成 html 表并且不知道如何处理（尚）动态生成的元素不可选择的情况的人，因为在脚本运行时尚不可用：
确保在 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() 调用内部处理所有逻辑
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句