Question

我正在尝试遍历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']
];

Answer 1

听起来您想过滤设置的电台

var min = 2;
var max = 5;
var result = stations.filter( i => i[0] > min && i[0] < max);

这将返回结果，其中将包含2行，其中第一列是3和4。

Answer 2

您可以通过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>

遍历javascript表和列表元素

2 个答案: