JavaScript如何实现动态创建表格的小案例？

2026-04-28 10:372阅读0评论SEO资源

内容介绍
文章标签
相关推荐

本文共计494个文字，预计阅读时间需要2分钟。

JavaScript案例-动态表格需求+数据静态存储，数据类型：对象，属性值：id, names。可以在页面中输入数据后，对数据进行存储（存储在datas数组中），在页面中显示出来。id不用输入，自动生成。

JavaScript小案例-动态表格需求

数据静态存贮，数据类型：对象，属性值：id,names
可以在页面中输入数据后，对数据进行存储(存贮在datas数组中)，在页面中显示出来。
id不用输入，自动生成，names值通过表格底部的输入框输入。
可以通过点击操作栏中的按钮，进行删除
可以实现键盘监听keyup,按下enter键，快捷输入。

代码

html

<link rel="stylesheet" href="stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <script src="stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <div class="container"> <table class="table table-bordered"> <thead> <tr> <td>编号</td> <td>类别</td> <td>操作</td> </tr> </thead> <tbody> </tbody> </table> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2"></label></label> <input type="text" class="form-control category" id="exampleInputName2" placeholder="动物类别"> </div> <button type="submit" class="btn btn-default">Send </button> </form> </div>

<style> span { cursor: pointer; } </style>

<script> //1. 读取数据，渲染表格 var tbody = document.querySelector("tbody") var btn = document.querySelector(".btn") var id = document.querySelector('.id') var cate = document.querySelector('.category') var datas = [ { id: 1, names: "

标签：javascript小案例动态表格

本文共计494个文字，预计阅读时间需要2分钟。

JavaScript案例-动态表格需求+数据静态存储，数据类型：对象，属性值：id, names。可以在页面中输入数据后，对数据进行存储（存储在datas数组中），在页面中显示出来。id不用输入，自动生成。


JavaScript小案例-动态表格
需求


数据静态存贮，数据类型：对象，属性值：id,names



可以在页面中输入数据后，对数据进行存储(存贮在datas数组中)，在页面中显示出来。


id不用输入，自动生成，names值通过表格底部的输入框输入。


可以通过点击操作栏中的按钮，进行删除


可以实现键盘监听keyup,按下enter键，快捷输入。


代码

html

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <script src="stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
    
    
    <div class="container">
    <table class="table table-bordered">
      <thead>
        <tr>
          <td>编号</td>
          <td>类别</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    <form class="form-inline">

      <div class="form-group">
        <label for="exampleInputName2"></label></label>
        <input type="text" class="form-control category" id="exampleInputName2" placeholder="动物类别">
      </div>

      <button type="submit" class="btn btn-default">Send </button>
    </form>
  </div>


css

  <style>
    span {
      cursor: pointer;
    }
  </style>


js

 <script>
    //1. 读取数据，渲染表格
    var tbody = document.querySelector("tbody")
    var btn = document.querySelector(".btn")
    var id = document.querySelector('.id')
    var cate = document.querySelector('.category')

    var datas = [
      { id: 1, names: "

标签：javascript小案例动态表格

相关推荐

相关推荐

`相关推荐`

`相关推荐`