首页 > 其他分享 >在不利用vue实现循环数据输入到表格

在不利用vue实现循环数据输入到表格

时间:2023-08-16 16:13:58浏览次数:44  
标签:vue 表格 data 单元格 数组 var 数据 输入

如果您不使用Vue或其他前端框架,可以使用原生的JavaScript来实现将循环数据输入到表格中的操作。

首先,您需要一个包含要展示数据的数组。然后,使用JavaScript循环遍历数据数组,动态创建表格的行和单元格,并将数据填充到相应的单元格中。

下面是一个示例代码,展示了如何使用JavaScript将循环数据输入到表格中:

<!DOCTYPE html>
<html>
<head>
  <title>循环数据输入到表格</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 5px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格主体内容将通过JavaScript动态生成 -->
    </tbody>
  </table>

  <script>
    // 假设有一个包含数据的数组
    var data = [
      { name: 'John', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Bob', age: 35 }
    ];

    // 获取表格主体元素
    var tbody = document.querySelector('#myTable tbody');

    // 循环遍历数据数组
    for (var i = 0; i < data.length; i++) {
      var row = document.createElement('tr'); // 创建表格行

      var nameCell = document.createElement('td'); // 创建单元格
      nameCell.textContent = data[i].name; // 填充单元格内容
      row.appendChild(nameCell); // 将单元格添加到行中

      var ageCell = document.createElement('td');
      ageCell.textContent = data[i].age;
      row.appendChild(ageCell);

      tbody.appendChild(row); // 将行添加到表格主体中
    }
  </script>
</body>
</html>

上述代码中,首先定义了一个包含数据的数组 data,然后使用 JavaScript 动态创建表格行和单元格,并将数据填充到相应的单元格中。最后,将生成的行添加到表格的主体部分。

通过这种方式,您可以根据数据数组动态生成表格内容,而无需使用Vue或其他前端框架。

标签:vue,表格,data,单元格,数组,var,数据,输入
From: https://www.cnblogs.com/luo9tian/p/17635356.html

相关文章

  • Unity UGUI的InputField(输入框)组件的介绍及使用
    UGUI的InputField(输入框)组件的介绍及使用1.什么是UGUI的InputField组件?UGUI的InputField组件是Unity中的一个用户界面组件,用于接收用户的输入。它可以用于创建文本输入框、密码输入框等功能。2.UGUI的InputField组件的工作原理UGUI的InputField组件通过监听用户的输入事件,用......
  • Vue 生命周期
    生命周期生命周期函数定义的位置与data属性、methods属性平级beforeCreate在Vue实例创建之前,data中的数据和methods中的方法并没有初始化,所以它不能被调用在created生命周期函数中,data中的数据和methods中的方法已经被初始化完成,可以在页面中调用......
  • Vue 样式绑定
    绑定HTMLclass:class (v-bind:class 的缩写) :class 指令也可以和一般的 class attribute共存绑定的对象并不一定需要写成内联字面量的形式,也可以直接绑定一个对象可以给 :class 绑定一个数组来渲染多个CSSclass绑定内联样式:style 支持绑定JavaScript对象......
  • ITK 实例8 从缓冲器中输入图像数据
    1#include"itkImage.h"2#include"itkImportImageFilter.h"//包含ImportImageFilter(图像像素数据导入缓冲器)类的头文件3#include"itkImageFileWriter.h"4//这个例子阐述了如何将数据输入到itk::Image类中。这在同其他软件系统相连时更加有5//用。许多......
  • vue 报错解决方法
    nodejs版本过高导致启动项目失败  控制台输入$env:NODE_OPTIONS="--openssl-legacy-provider"重新下载依赖 npmi启动项目npmrundev 参考  umi项目启动报错node:internal/crypto/hash:71this[kHandle]=new_Hash(algorithm,xofLen);_今夜來看雪的博客-CSDN博......
  • 搞懂 Vue3 中的各种 ref:toRef,toRefs,isRef,unref...
    在Vue3中,有许多与响应式相关的函数,例如toRef、toRefs、isRef、unref等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法,让我们在实际开发中知道应该使用哪些API并能够熟练地回答面试官的相关问题。ref()大家对于ref这个API肯定都不......
  • vue-vuex中使用commit提交mutation来修改state的原因解析
    https://blog.csdn.net/a460550542/article/details/82620457 在vuex中,关于修改state的方式,需要commit提交mutation。官方文档中有这么一句话:更改Vuex的store中的状态的唯一方法是提交mutation。为了搞清楚其原因,查阅了很多资料,发现其它人在做vuex的源码解析的时候,并......
  • 浏览器中输入:“www.learnjava.com”之后都发生了什么?请详细阐述
    当在浏览器中输入"www.woaijava.com"并按下回车后,会依次发生以下步骤:域名解析:浏览器首先会将输入的域名"www.woaijava.com"解析为对应的IP地址。它会查询本地DNS缓存,如果找不到,则会向域名服务器发起请求。DNS查询:如果本地DNS缓存中没有对应的IP地址,浏览器会......
  • vuex中actions和mutations区别
    定义:在Vuex中,actions和mutations是两个核心概念,用于管理应用程序状态的变化。一:Mutationsmutations是用于修改Vuex状态的唯一方法。它们是同步操作,意味着它们必须是纯函数,以确保状态的可预测性。这意味着mutations应该只用于同步操作,例如在响应用户事件时更新状态。它们不应......
  • vue3 - 警告 `shallowRef` instead of `ref` - 解决
    完整警告[Vuewarn]:VuereceivedaComponentwhichwasmadeareactiveobject.Thiscanleadtounnecessaryperformanceoverhead,andshouldbeavoidedbymarkingthecomponentwith`markRaw`orusing`shallowRef`insteadof`ref`.这是因为参数内容有组件,......