在前端开发中，我们经常需要从HTML表格中获取数据。虽然使用jQuery这样的库可以轻松地完成此任务，但是在某些情况下，可能需要使用原生JavaScript来获取表格单元格的值。本文将介绍一些方法来实现此目标。
通过行和列索引获取单元格的值
可以使用document.getElementsByTagName()方法获取表格行和单元格元素。以下是使用该方法获取表格第一行第一个单元格的示例代码：
--- ----- - ------------------------------------------ --- ---- - ----------------------- --- ----- - ---------------
在上面的代码中，我们首先获取了页面上的第一个表格元素。然后，我们使用rows和cells属性分别访问表格的行和单元格。最后，我们使用innerHTML属性获取单元格内容。
使用类名和属性选择器查找单元格
如果需要获取特定单元格的值，可以使用类名或属性选择器来查找它们。以下是使用类名查找单元格值的示例代码：
--- ----- - -------------------------------------------- --- ----- - -------------------
在上面的代码中，我们首先使用getElementsByClassName()方法获取所有具有“my-class”类的元素。然后，我们使用数组索引访问第一个元素，并使用innerHTML属性获取其内容。
可以使用类似的方法使用属性选择器查找单元格。以下是一个示例代码：
--- ---- - ----------------------------- ----------------- ------------------------ --- ----- - ---------------
在上面的代码中，我们首先使用querySelector()方法查找具有data-id和data-field属性的单元格元素。然后，我们使用innerHTML属性获取其内容。
将表格数据存储为JavaScript对象
如果需要从表格中获取大量数据，则可能需要将其存储为JavaScript对象以便进行处理。以下是将表格数据转换为JavaScript对象的示例代码：
-------- -------------------- -
--- ---- - ---
--- ------- - ---
--- ---- - - -- - - --------------------------- ---- -
---------- - -----------------------------------------------
-
--- ---- - - -- - - ------------------ ---- -
--- --- - ---
--- ---- - - -- - - --------------------------- ---- -
--------------- - ---------------------------------
-
---------------
-
------ -----
-
--- ----- - ------------------------------------------
--- ---- - ---------------------在上面的代码中，我们定义了一个名为tableToObject()的函数，该函数将表格数据转换为JavaScript对象。首先，我们创建一个名为data的空数组，并创建一个名为headers的空数组来保存表头信息。
然后，我们循环遍历表格第一行的单元格，并使用innerHTML属性获取其内容。我们将表头信息转换为小写，并将其存储在headers数组中。
接下来，我们循环遍历表格所有行。对于每行，我们创建一个名为row的空对象。然后，我们循环遍历该行的所有单元格，并使用headers数组中的索引将单元格的内容添加到row对象中。
最后，我们将row对象添加到data数组中，并返回该数组作为函数的输出结果。您可以使用以下代码调用该函数：
--- ----- - ------------------------------------------ --- ---- - --------------------- ------------------
结论
无论您需要获取单个单元格的值还是整个表格的数据，都可以使用原生JavaScript轻松完成此任务。虽然jQuery等库可以使此过程更加容
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27367