js获取table中td值的方法

前端目前来说比较火爆，有些小伙伴也在学习关于前端的一些知识，比如
javascript，今天，小编我就来给大家科普一下
js中怎样获取table中单元格td的内容。想要学习的小伙伴们可以认真看哟！

操作方法

  • 01

    首先我们先新建一个html文件，如图，蓝色框里面的内容，相信对于学习html的小伙伴来说不是难事。

  • 02

    建好之后，建立一个表格table ，边框为1。

  • 03

    然后建立一行tr,如图所示，小伙伴们可以根据自己的喜好，在这里，小编为了更好的给大家讲解所以只建立一行。

  • 04

    然后建立两个单元格，里面写上自己的内容。

  • 05

    这里，再添加一个按钮，待会用来绑定一个鼠标事件。

  • 06

    做好之后，预览一下，效果如图所示。

  • 07

    然后插入脚本，在这里，最好把脚本放在body后面，如果放在前面，会因为脚本运行时页面没有加载完，而无法获取表格数据。

  • 08

    然后定义一个变量，用来存储要获取的单元格的内容。

  • 09

    如图后面的代码就是获取单元格内容的方法。

  • 10

    接着给按钮绑定一个事件。

  • 11

    document代表的是当前这个页面，getElementsByTagName获取的是标签对，rows代表行，cells代表列，innerHTML代表的是指定元素的内容。整句代码表示的就是“ 在当前这个页面第一个标签为table的第一行第一列的内容”。而当前页面的第一个标签table就是我们建立的表格，所以就会获取到table->tr->td->innerHTML。

  • 12

    当点击按钮之后，就会弹出一个警告窗口，获取到第一行第一列单元格的内容。

赞 (0)

相关推荐

  • jquery如何获取table中td值的方法

    利用Jquery获取table的td的值. 操作方法 01 首先下载好jquery,这里使用的是3.2.1版本 02 <!-- 新建一个简单的表格,这里2 * 2的表格 --> <t ...

  • 三种在Excel中提取两列中唯一值的方法

    从两列中提取不重复(唯一)值,本指将两列中所有相同行的两个单元格数据连接后去掉重复项.例如在下图的A.B两列中,有部分行两个单元格中的数据相同,即为重复值,图中用红色标识.现在需要从两列中提取唯一值到 ...

  • js获取的src值的三种方式

    js获取<img>的src值的三种方式,并分析 DOM对象与jquery对象有什么不同 操作方法 01 var img1src = $("#jsb_czq_pic1") ...

  • Excel怎么通过公式获取单元格数据中第五大值

    Excel怎么通过公式获取单元格数据中第五大值

    Excel是现在十分常用的一款办公软件,有些新用户不知道怎么通过公式获取单元格数据中第五大值,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图所示,打开电脑中的Excel文 ...

  • 如何用css设置一个table中的td的边框

    在网页设计过程中,怎么设置table中td的边框,设置div的边框都是一样 操作方法 01 html代码: <table> <tr> <td><input t ...

  • Qt和Excel:Qt从excel单元格中读取数据的方法

    Qt是应用程序开发常用的开发框架,但桌面编程中很多时候对用到excel的操作,这种情况怎么处理呢?Qt提供了一套调用com组件的方法,本文就介绍一下,如何使用Qt实现对excel的操作.文中采用Qt4 ...

  • java如何向String[]中添加值

    在平时的java开发中,经常会操作数组,那么,java中怎么像数组中添加元素呢,java怎么向String[]中添加值呢,下面本文就介绍一下. 操作方法 01 在java中,向String[]中添加元 ...

  • 如何快速获取心悦成长值

    心悦是腾讯对于用户使用中消费的一种反馈,一般来说心悦等级越高表示越尊贵,今天给大家分享一下如何快速获取心悦成长值. 操作方法 01 最快获取心悦会员成长值的方法是通过游戏充值获得,充值越多成长奖励越丰 ...

  • js获取cookie值的方法

    JavaScript是运行在客户端的脚本,需要用到cookie,所以可以用JS来设置cookie.那么cookie怎么设置呢?下面小编教你怎么设置cookie吧. 操作方法 01 首先JS设置cook ...