程序员经验分享-hwhale

如何使用二维数组插入表格行和列

2023-12-10

所以我有 2 个数组，它们是 var num = ["1", "2", "3"]; var cars = ["萨博", "沃尔沃", "宝马"];
我制作了一个按钮，它将添加行和列，并将 2 个数组的值放入表中。但是我不知道如何将其变成二维数组并将其显示在我的桌子上。

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var table = document.getElementById("myTable");
    var row;
    var t = [][];
    var num = ["1", "2", "3"];
    var cars = ["Saab", "Volvo", "BMW"];
    for (i = 0; i < num.length;i++){
        var row = table.insertRow(i);
        for (x = 0; x < cars[i].length;x++){
            var cell1 = row.insertCell(x);

在这部分之后我不知道该怎么做，而且它不起作用。如何组合数组并使其显示在表格中，例如（t[0][0] 将是 1 saab）

*cars[i] = num[x];
 cell1.innerHTML = cars[i][x];*
       }
   }
}

一段时间以来，我使用下面的通用代码来生成 HTML 表。它将采用对象数组，对象属性将成为表头，值将成为单元格。因此，如果您的数据采用以下形式

var myCars = [{Pos: 1, Make: "Saab"}, {Pos: 2, Make: "Volvo"}, {Pos: 2, Make: "BMW"}]然后我们会得到一个像这样的表

var tableMaker = (o,h) => {var keys = Object.keys(o[0]),
                           rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                                           : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
                           rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
                           return "<table>" + rows + "</table>";
                           };
        myCars = [{Pos: 1, Make: "Saab"}, {Pos: 2, Make: "Volvo"}, {Pos: 2, Make: "BMW"}] ,
         table = tableMaker(myCars,true); // if second argument provided as truthy then headers generated
document.write(table);

但我们手头没有类似的数据。那么让我们来实现吧。我们不需要标头，所以只需传递tableMaker函数的第二个参数为 false。那么我们剩下的唯一事情就是生成二维数组形式的数据作为第一个参数。我们开始做吧;

var tableMaker = (o,h) => {var keys = Object.keys(o[0]),
                           rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                                           : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
                           rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
                           return "<table>" + rows + "</table>";
                           },
           num = ["1", "2", "3"],
          cars = ["Saab", "Volvo", "BMW"],
         tdata = num.map((e,i) => [e,cars[i]]); // this is your 2D array.
         table = tableMaker(tdata,false), // if second argument provided as truthy then headers are generated
            
document.write(table);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

multidimensionalarray

如何使用二维数组插入表格行和列 的相关文章

  • 为什么我在 ECMAScript / ActionScript 3 中看到不精确的浮点结果？

    大家好 让我们直接跳到代码示例 以展示 ECMAScript JavaScript AS3 如何无法正确执行简单的数学运算 AS3 对 Number 类使用 IEEE 754 双精度浮点数 据说与JavaScript 中使用的 trace

  • 从提交的表单中转义字符串中的字符

    每次发布帖子时 我都会得到转义字符 gt gt gt 我有一个多步骤表单 它将数据从一种表单传输到另一种表单 我将这些值与准备好的语句一起保存在数据库中 数据库中的值当前看起来像Paul s House 用户应该可以在字符串中使用单引号和双

  • 在java中将DataURL图像转换为图像文件

    我在我的 java servlet 中接收图像 DataURL 它看起来像 data image jpeg base64 9j 4AAQSkZJRgABAQAAAQABAA 我需要将其另存为图像文件 我该怎么做 The simplest w

  • javascript获取网页中选定文本的段落

    突出显示文本后 我想获取所选文本所在的段落 var select window content document getSelection 请问有什么指点吗 这实际上很难做到 因为你必须考虑六种情况 所选内容不在一个段落内 简单 整个选择都

  • Javascript/Node 中从不执行用户代码的隐藏线程：是否可能，如果可能，是否会导致竞争条件的神秘可能性？

    根据评论 答案 请参阅问题底部的更新 这个问题实际上是关于可能性的hidden不执行回调的线程 我有一个关于潜在的神秘场景的问题 涉及节点请求模块 https www npmjs com package request其中 A 构建完整的

  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te

  • 是否有 IE 渲染完成事件？

    在尝试确定页面加载时间为 20 秒的原因时 我发现 IE8 中有一些奇怪的行为 场景是这样的 我进行 ajax 调用 它返回并且回调看起来像这样 StoreDetailsContainer html tableHtml var StoreD

  • 适用于 HTML5 混合应用程序的 CORS

    我读过很多关于 CORS 的文章 以及允许 Access Control Allow Origin 如何成为 Web 服务器的安全漏洞 但没有一篇文章解释了如何允许 HTML5 混合应用程序访问某些不允许使用通配符 的域上托管的 Web 服

  • 如何使用 JavaScript 禁用滚动条？

    当我仅在 Internet Explorer 7 中显示代表模式窗口的 div 时 我需要锁定浏览器滚动条 谷歌搜索我发现我可以使用document body style overflow hidden 但这不适用于 IE7 我也尝试过do

  • 透明、无边框文本输入

    如何删除周围的边框

  • 解析 PHP 响应：未捕获的语法错误：意外的标记 <

    我正在使用 AJAX 来调用 PHP 脚本 我唯一需要从响应中解析的是脚本生成的随机 ID 问题是 PHP 脚本会引发许多错误 这些错误实际上很好 不会妨碍程序功能 唯一的问题是当我跑步时 parseJSON response I get

  • 在 WordPress 和 woocommerce 中禁用 zxcvbn.min.js

    如您所知 zxcvbn min js 约为 400kb 并且默认在 WordPress 网站中加载 我想知道如何阻止加载此 JavaScript 库 因为我不想在我的网站中检查密码长度 将以下内容添加到主题的 function php 或自

  • 带有子节点的拖放区域

    我有一个带有多个子节点的拖放区域 主要元素有dropenter and dropleave事件 但是 如果您将文件拖动到主元素内部和子节点上方 则dropleave被触发 如何处理 以便dropleave仅当拖动的元素和鼠标位于主元素之外时

  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它

  • Electron Auth0Lock“原始文件://不允许”

    尝试让 auth0 与我的电子应用程序一起使用 当我按照默认教程并尝试使用用户名 密码 身份验证进行身份验证时 锁定失败并显示 403 错误 并响应 不允许使用 Origin file 我还在 auth0 仪表板中客户端设置的允许来源 CO

  • HTML 布局：向现有网站添加侧边栏

    我有一个网站 其正文如下所示 div div div div div div 这些中没有使用绝对 相对定位技巧divs 但是有很多floats clears margins and padding这些风格divs 及其内部元素 所有这些都会

  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j

  • 如何将字符串转换为 Javascript 中可执行的代码行？

    我有以下代码 console log I am var x console log Alive 现在我只想使用x执行分配给它的代码字符串 例如 我什至可能不知道 x 的值 但只是想执行它 这可能吗 eval https developer

  • CSS交付优化：如何推迟CSS加载？

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers

  • AngularJS 应用程序：如何将 .js 文件包含到 index.html 中

    我是 angularJS 的新手 我设法使用 AngularJS 构建了一个phonegap应用程序 该应用程序正常并且运行良好 问题是 现在我对 angularJS 的工作原理有了更多的了解 至少我认为我已经了解了 我担心我的应用程序文件

随机推荐

  • 是否有另一种方法在工作人员中加载额外的包（并行计算）？

    R 中并行化的一种方法是通过snowfall包裹 要将自定义函数发送给工作人员 您可以使用sfExport 参见乔里斯的帖子here 我有一个自定义函数 它依赖于非基本包中未自动加载的函数 因此 当我并行运行我的函数时 R 会崩溃 因为某些

  • 使用 iText 提取文本不起作用：编码或加密文本？

    我有一个 pdf 文件 其安全属性如下 打印 允许 文件组装 不允许 内容复制 允许 可访问性内容副本 允许 页面提取 不允许 我尝试获取带有示例代码的文本作为文档示例 如下所示 pdftext Text null StringBuilde

  • Rails 3 public_activity，销毁记录

    我正在使用公共活动如果用户创建帖子 则进行 gem 跟踪 有没有办法在删除帖子时销毁公共活动记录 以便在活动源中不会显示类似以下内容的内容 A post was deleted 而只是删除活动表中的特定活动 Thanks 我认为这就是OP正

  • 通过 CURL POST JSON 数据并抓取它

    我正在尝试传递 json 数据作为 cURL POST 的参数 然而 我坚持抓住它并将其保存在数据库上 卷曲文件 data array name gt Hagrid age gt 36 data string json encode dat

  • 在面板上绘制 Html 表格？

    如何生成常规的 html table 在 Sencha Touch 2 的面板上 每行的数据可能来自商店 它不像列表那样非常 移动 但我想在我的平板电脑应用程序上有一些详细面板 其中包含如下几个部分 header 1 table tr td

  • Codeigniter多个文件上传路径

    我正在构建一个应用程序 需要获取上传的文件并将它们放在单独的缩略图和全尺寸图像目录中 但是 config upload path uploads 只允许我选择一个上传路径 如何定义两个或多个上传路径 实际上您需要做的就是 重新初始化 上传类

  • 为什么 Laravel 或 Beanstalkd 会跳槽？

    我正在管理音频转换Laravel 队列 and 豆茎 监测者监督者 当用户上传音频文件时 它会转到AudioController php这会触发一个Queue push AudioProcess 它本身会触发exec sh some scr

  • JavaScript 从嵌套对象获取值[重复]

    这个问题在这里已经有答案了 如果这是我的目标 var obj bakery1 small name Small cookie price 0 75 large name Large cookie price 3 00 bakery2 sma

  • 使用 if 语句查找特定值

    您好 我在 Excel 中有一个很大的产品订单数据集 并且它将不断增长 数据集看起来像这样 Product Date Lsat24 Next24 Summary Buyer day1 AX1 2 1 2019 Checking invent

  • 在主线程上继续执行任务

    如果这是一个简单的问题 请原谅我 我无法用足够通用的方式来表达它来寻找答案 考虑这段代码 var task Task Factory StartNew gt Whatever task ContinueWith Callback TaskS

  • 递归 CTE - 获取后代（多对多关系）

    我拥有的 给定一棵树 或更类似于有向图 描述系统如何由其通用部分组成 现在让这个系统例如人体及其身体部位的节点 例如3可能是有左叶和右叶的肝脏 6 and 9 两者都有静脉 8 也可以在肝脏的任何未指定的位置找到 因此8 gt 3 而且也在

  • 如何快速从照片库中获取图像或电影路径

    我有这段代码 但在尝试获取图像路径时遇到问题 我在 google 和 stack over flow 中搜索 但我找到的解决方案是 Objective C 或在 swift 中不再工作的代码 这是我的代码 IBAction func cho

  • 如何使用 jQuery 为表格制作下拉列表过滤器？

    我想在特殊列中创建下拉表过滤器 例如我想为 已婚 列创建过滤器并从下拉列表中选择是或否 这是我的表 我需要一个 jquery 代码来帮助我制作过滤器 table class table table bordered table stripe

  • SQL分区在mysql中使用“不存在”

    我有下表 committee table commname profname commA bill commA jack commA piper commB bill commB piper 我正试图找到 吹笛者 所在的每个委员会中的教授

  • Chrome 配置文件未加载硒

    这是我的代码 from selenium import webdriver options webdriver ChromeOptions options add argument r user data dir C Users shahr

  • Keras：如何扩展validation_split以生成第三组，即测试集？

    我正在使用带有 TensorFlow 后端的 Keras 我使用带有 valid split 参数的 ImageDataGenerator 将数据拆分为训练集和验证集 因此 我使用 flow from directory 并将子集设置为 训

  • Vulkan 描述符绑定

    在我的 vulkan 应用程序中 当所有网格使用相同的纹理时 我曾经这样绘制网格 Updatedescriptorsets texture Command buffer record For each mesh Bind transform

  • Android - cam.setPreviewDisplay(holder) 遇到 IOError

    我正在尝试使用相机的图像作为动态壁纸的一部分 在我声明的引擎中 我有以下代码 public class Class extends WallpaperService Camera cam Override public void onCre

  • PHP 中提交文本的换行转换

    我设置了一个系统 供用户将他们的文章提交到我的数据库中 因为它只是 HTML 所以我不想指望他们知道如何输入 br 每次有换行符时 所以我使用 PHP 函数nl2br 在输入上 我还提供了一个文章修改工具 它将把他们的文章带回到表单中 但是

  • 如何使用二维数组插入表格行和列

    所以我有 2 个数组 它们是 var num 1 2 3 var cars 萨博 沃尔沃 宝马 我制作了一个按钮 它将添加行和列 并将 2 个数组的值放入表中 但是我不知道如何将其变成二维数组并将其显示在我的桌子上

热门标签