プルダウン付き表の検証（htmlブロック

Question

Accepted Answer

フィルター付きテーブル 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 =

よくあるご質問

プルダウン付き表の検証（htmlブロック

動物データ