循环遍历javascript表和列表元素
循环遍历javascript表和列表元素
提问于 2018-07-03 05:21:13
我试图循环通过一个javascript表，我想列出两个用户选择的元素之间的元素。
例如，如果用户选择Id 2和5，则循环应该列出第3行和第4行。我尝试使用for循环，但没有结果。
var station = [
[0, 'JAMAA EL FNA', 'L1'],
[1, 'KOUTOUBIA', 'L1'],
[2, 'HOTEL DE VILLE', 'L1'],
[3, 'R.P BERDII', 'L1'],
[4, 'GRAND POSTE', 'L1'],
[5, 'CAREE EDEN', 'L1'],
[6, 'PL ABDELMOUMEN', 'L1'],
[7, 'PLACE D ARMES', 'L1'],
[8, 'FST', 'L1'],
[9, 'SEMIRAMIS', 'L1'],
[10, 'DR KUDIA', 'L1'],
[11, 'MCDO', 'L1'],
[12, 'CAFE AMINE', 'L1'],
[13, 'FAC SEMLALIA', 'L1'],
[14, 'ROUIDATE', 'L1'],
[15, 'CLUB MINISTRE JUSTICE', 'L1'],
[16, 'BEN TBIB', 'L1'],
[17, 'ASWAK SALAM', 'L1'],
[18, 'BAB DOUKALA', 'L1'],
[19, 'JAMAA EL FNA', 'L2'],
[20, 'KOUTOUBIA', 'L2']
];回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-03 05:42:35
您可以通过filtering来选择项目：
let items = station.filter(curr => curr[0] > startNum && curr[0] < endNum)
var station = [
[0, 'JAMAA EL FNA', 'L1'],
[1, 'KOUTOUBIA', 'L1'],
[2, 'HOTEL DE VILLE', 'L1'],
[3, 'R.P BERDII', 'L1'],
[4, 'GRAND POSTE', 'L1'],
[5, 'CAREE EDEN', 'L1'],
[6, 'PL ABDELMOUMEN', 'L1'],
[7, 'PLACE D ARMES', 'L1'],
[8, 'FST', 'L1'],
[9, 'SEMIRAMIS', 'L1'],
[10, 'DR KUDIA', 'L1'],
[11, 'MCDO', 'L1'],
[12, 'CAFE AMINE', 'L1'],
[13, 'FAC SEMLALIA', 'L1'],
[14, 'ROUIDATE', 'L1'],
[15, 'CLUB MINISTRE JUSTICE', 'L1'],
[16, 'BEN TBIB', 'L1'],
[17, 'ASWAK SALAM', 'L1'],
[18, 'BAB DOUKALA', 'L1'],
[19, 'JAMAA EL FNA', 'L2'],
[20, 'KOUTOUBIA', 'L2']
];
const start = document.getElementById('start')
const end = document.getElementById('end')
const results = document.getElementById('results')
function changed() {
let startNum = parseInt(start.value || -1)
let endNum = parseInt(end.value || station.length + 1)
let items = station.filter(curr => curr[0] > startNum && curr[0] < endNum)
results.innerHTML = items.map(item => `<tr><td>${item[0]}</td><td>${item[1]}</td><td>${item[2]}</td></tr>`).join('')
}
changed()
start.addEventListener('input', changed)
end.addEventListener('input', changed)table {
width: 100%;
}
table th {
text-align: left;
}Start: <input id="start" type="number"> End: <input id="end" type="number">
<table>
<thead>
<tr>
<th>ID</th>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody id="results"></tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51143879
复制相关文章
相似问题