フィルター付きテーブルtable {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}動物データ動物名:生息地:個体数:動物名生息地個体数```
JavaScript (script.js):
```javascript
// データ
const animals = ['人間', 'ネズミ', '牛', '虎', '兎', '猿', '羊', '馬', '鮪'];
const locations = ['日本', 'アメリカ', '中国', 'ロシア', 'インド', 'フランス', 'ドイツ'];
const populations = ['10', '100', '千', '万', '十万', '百万', '千万', '億', '十億', '百億'];
// テーブルデータの生成
const tableData = [];
for (let i = 0; i < 100; i++) {
const animal = animals[Math.floor(Math.random() * animals.length)];
const location = locations[Math.floor(Math.random() * locations.length)];
const population = populations[Math.floor(Math.random() * populations.length)];
tableData.push({ animal, location, population });
}
// テーブルの描画
const tableBody = document.querySelector('#dataTable tbody');
tableData.forEach(data => {
const row = document.createElement('tr');
row.innerHTML = `
${data.animal}
${data.location}
${data.population}
`;
tableBody.appendChild(row);
});
// プルダウンメニューの作成
const animalFilter = document.querySelector('#animalFilter');
const locationFilter = document.querySelector('#locationFilter');
const populationFilter = document.querySelector('#populationFilter');
const addOption = (select, value, text) => {
const option = document.createElement('option');
option.value = value;
option.text = text;
select.add(option);
};
addOption(animalFilter, '', 'すべて');
animals.forEach(animal => addOption(animalFilter, animal, animal));
addOption(locationFilter, '', 'すべて');
locations.forEach(location => addOption(locationFilter, location, location));
addOption(populationFilter, '', 'すべて');
populations.forEach(population => addOption(populationFilter, population, population));
// フィルタリング
const filterTable = () => {
const animalValue = animalFilter.value;
const locationValue = locationFilter.value;
const populationValue = populationFilter.value;
const rows = tableBody.querySelectorAll('tr');
rows.forEach(row => {
const animal = row.cells[0].textContent;
const location = row.cells[1].textContent;
const population = row.cells[2].textContent;
const showRow =