html做一个单词查询栏

最新推荐文章于 2024-04-25 14:27:36 发布

吃咸菜码代码

最新推荐文章于 2024-04-25 14:27:36 发布

阅读量184

点赞数

文章标签： html c# javascript

本文链接：https://blog.csdn.net/qq_61549190/article/details/134332720

版权

body区

<body>
  <input type="text" id="searchInput" oninput="searchWords()" placeholder="输入单词">
  <table id="wordTable">
    <tr>
      <th>单词</th>
      <th>中文意思</th>
      <th>例句</th>
      <th>例句翻译</th>
    </tr>
  </table>
  <p id="wordInfo"></p>
</body>

脚本代码区

<script>
function searchWords() {
    var input = document.getElementById('searchInput').value.toLowerCase();
    var wordTable = document.getElementById('wordTable');
    wordTable.innerHTML = "<tr><th>单词</th><th>中文意思</th><th>例句</th><th>例句翻译</th> </tr> " ;
    words.forEach(function(item) {
      if (item.word.includes(input)) {
        var row = wordTable.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = item.word;
        cell2.innerHTML = item.meaning;
        cell3.innerHTML = item.example;
        cell4.innerHTML = item.example_meaning;
      }
    });
  }
</script>

数组数据区

<script>
var words = [
   { word: "apple", meaning: "苹果",  example: "i like apple", example_meaning: "我喜欢苹果" },
  { word: "banana", meaning: "香蕉", example: "he like banana", example_meaning: "他喜欢香蕉" },
  { word: "orange", meaning: "橙子",  example: "she like orange", example_meaning: "她喜欢橙子" },
  { word: "grape", meaning: "葡萄",  example: "student like grape", example_meaning: "学生喜欢葡萄" },
  { word: "watermelon", meaning: "西瓜",  example: "teacher like watermelon", example_meaning: "老师喜欢西瓜",   },
  
];
</script>

css样式区

<style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>

整体代码

<!DOCTYPE html>
<html>
<head>
  <title>Random Word Game</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <input type="text" id="searchInput" oninput="searchWords()" placeholder="输入单词">
  <table id="wordTable">
    <tr>
      <th>单词</th>
      <th>中文意思</th>
      <th>例句</th>
      <th>例句翻译</th>
    </tr>
  </table>
  <p id="wordInfo"></p>
</body>
<script>
 var words = [
   { word: "apple", meaning: "苹果",  example: "i like apple", example_meaning: "我喜欢苹果" },
  { word: "banana", meaning: "香蕉", example: "he like banana", example_meaning: "他喜欢香蕉" },
  { word: "orange", meaning: "橙子",  example: "she like orange", example_meaning: "她喜欢橙子" },
  { word: "grape", meaning: "葡萄",  example: "student like grape", example_meaning: "学生喜欢葡萄" },
  { word: "watermelon", meaning: "西瓜",  example: "teacher like watermelon", example_meaning: "老师喜欢西瓜",   },
  
];
  function searchWords() {
    var input = document.getElementById('searchInput').value.toLowerCase();
    var wordTable = document.getElementById('wordTable');
    wordTable.innerHTML = "<tr><th>单词</th><th>中文意思</th><th>例句</th><th>例句翻译</th> </tr> " ;
    words.forEach(function(item) {
      if (item.word.includes(input)) {
        var row = wordTable.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = item.word;
        cell2.innerHTML = item.meaning;
        cell3.innerHTML = item.example;
        cell4.innerHTML = item.example_meaning;
      }
    });
  }
</script>
</html>

效果展示区

扩展

如果想要查询单词和中文意思显示数组直接并列item.数组中变量名

if (item.word.includes(input) || item.meaning.includes(input))

<script>
 function searchWords() {
    var input = document.getElementById('searchInput').value.toLowerCase();
    var wordTable = document.getElementById('wordTable');
    wordTable.innerHTML = "<tr><th>单词</th><th>中文意思</th><th>例句</th><th>例句翻译</th> </tr> " ;
    words.forEach(function(item) {
      if (item.word.includes(input) || item.meaning.includes(input)) {
        var row = wordTable.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = item.word;
        cell2.innerHTML = item.meaning;
        cell3.innerHTML = item.example;
        cell4.innerHTML = item.example_meaning;
      }
    });
  }
</script>