`

JavaScript从HTML Table中取得某单元格Cell中的数据

阅读更多

在IE和FF下稍有不同:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">
        //code from NC01 http://forums.asp.net/t/1395561.aspx
        function getTableColumnValue(tableId, rowNumber, columnNumber) {
            var tableRef = document.getElementById(tableId);

            var elementRef = tableRef.rows[rowNumber].cells[columnNumber];
            var elementValue = '';

            if (elementRef.textContent) {
                // Firefox
                elementValue = elementRef.textContent;
            }
            else if (elementRef.innerText) {
                // IE
                elementValue = elementRef.innerText;
            }
            else {
                // Default
                elementValue = elementRef.innerHTML;
                var regExp = /<\/?[^>]+>/gi;

                elementValue = elementValue.replace(regExp, '');
            }

            //alert(elementValue);

            return elementValue;
        }
    </script>

</head>
<body>
    <table border="1" id="myTable">
        <tr>
            <td>
                aa
            </td>
            <td>
                bb
            </td>
            <td>
                cc
            </td>
        </tr>
        <tr>
            <td>
                dd
            </td>
            <td>
                ee
            </td>
            <td>
                ff
            </td>
        </tr>
        <tr>
            <td>
                gg
            </td>
            <td>
                hh
            </td>
            <td>
                ii
            </td>
        </tr>
    </table>
    <input type="button" value="click" onclick="this.value=getTableColumnValue('mytable',1, 2);">
</body>
</html>

 

分享到:
评论

相关推荐

    javascript万能table合并单元格,隐藏列 html版

    ### JavaScript 实现 HTML Table 单元格合并及隐藏列功能详解 #### 一、背景介绍 在处理 HTML 表格时,我们经常会遇到需要合并相同数据的单元格以及根据需求显示或隐藏某些列的情况。例如,在报表展示或者数据汇总...

    table合并单元格的多种方法

    在表格(Table)设计中,有时我们需要合并单元格来达到特定的展示效果,例如创建标题行或列,或者为了美观和布局对齐。在HTML、CSS以及JavaScript中,都有多种方式可以实现单元格的合并。这里我们将详细探讨六种合并...

    JS TABLE CELL 相同内容 单元格 合并

    Table前端同一列里面内容相同的单元格合并,网上找的存在如下问题: 1、大部分只能合并某一列,不能多列; 2、有些能合并多列的,首列合并后,第二列合并单元格行数不能超过首列合并的单元格行数,虽然第二列值可能...

    Html中用table画斜线

    综上所述,HTML中的`&lt;table&gt;`不仅可以用于展示数据,还可以通过巧妙的方式在单元格内绘制斜线。理解并掌握这些技巧,可以让你在Web开发中更加得心应手。通过实践和不断学习,你可以创造出更加美观且功能丰富的HTML...

    jQuery实现动态更改table表格数据

    这里我们简单地模拟一下这个过程,将新的单元格值保存到JavaScript数组中。 ```javascript function updateDataSource(cell, newValue) { var rowIndex = cell.parent().index(); // 获取行索引 var colIndex = ...

    获取多选table选中行中的单元格内容

    如果需要处理特定列的数据,可以使用`cellIndex`属性确定当前单元格在行中的位置。 五、示例代码 ```javascript // 获取所有复选框 const checkboxes = document.querySelectorAll('table input[type="checkbox"]'...

    VUE + elementui-table组件 在table-cell单元格中绘制微型echarts图

    通过以上步骤,就可以在Vue项目中使用Element UI的表格组件,并在table-cell单元格中绘制微型的ECharts图表,实现数据的可视化展示。需要注意的是,实际开发过程中可能需要根据实际的数据结构和样式需求进行相应的...

    VUE+elementui组件在table-cell单元格中绘制微型echarts图

    本篇文章将详细讲解如何在`table-cell`单元格内绘制微型ECharts图,以满足此类需求。 首先,ECharts是一个优秀的JavaScript可视化库,它提供了丰富的图表类型和强大的交互功能。在Vue项目中,我们可以利用ECharts的...

    javascript将html的table变为可编辑表格

    在JavaScript编程中,将HTML的表格(`&lt;table&gt;`元素)转换为可编辑表格是一项常见的需求,这可以增强用户交互性,允许用户直接在页面上修改数据。本教程将详细介绍如何实现这一功能,并提供一个调用示例,帮助开发者...

    如何用js获取table第1行第2列的值

    在HTML中,table由`&lt;table&gt;`标签定义,每一行由`&lt;tr&gt;`标签表示,而每一列则由`&lt;td&gt;`(表格数据)或`&lt;th&gt;`(表头数据)标签表示。在JavaScript中,我们可以使用DOM操作或者jQuery库来实现这个功能。 **纯JavaScript...

    JavaScript的Table表格对象

    本文将深入探讨如何使用JavaScript来操作HTML中的表格元素,包括获取单元格、行的数据以及各种属性。 首先,我们需要了解HTML表格的基本结构,它由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(数据单元格)...

    HTML的Table数据导出excel和例子

    #### 四、遍历HTML中的Table 了解了以上知识后,我们可以编写函数遍历表格的每一行和每一列,提取所需的数据。 ```javascript function accessAllTable(objTab) { for (var i = 0; i ; i++) { for (var j = 0; j...

    js合并单元格 相同内容的单元格合并

    在JavaScript编程中,合并单元格是一项常见的需求,特别是在处理HTML表格时。这通常涉及到优化数据展示,例如在报告或统计中避免重复信息占用过多空间。本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并...

    【JavaScript源代码】vue 中使用 vxe-table 制作可编辑表格的使用过程.docx

    创建一个基础的`vxe-table`,需要在模板中设置表格的结构和数据。以下是一个简单的例子: ```html &lt;vxe-table :align="allAlign" :data="tableData"&gt; &lt;vxe-table-column type="seq" width="60"&gt;&lt;/vxe-table-...

    createtable.rar_javascript

    首先,让我们从基础开始,了解如何在HTML中创建一个基本的表格。HTML的`&lt;table&gt;`标签用于定义表格,`&lt;tr&gt;`定义行,`&lt;th&gt;`定义表头,而`&lt;td&gt;`则定义数据单元格。例如: ```html &lt;table&gt; 表头1 表头2 数据1 ...

    vue 中 elment-ui table合并上下两行相同数据单元格

    本文将详细介绍如何在Vue中使用Element-UI的`el-table`组件来合并上下两行相同数据的单元格。 首先,我们需要在HTML模板中设置`el-table`组件。在以下示例中,我们定义了一个表格,包含四个列(项目名称、污染区段...

    javascript实现table单元格点击展开隐藏效果(实例代码)

    在Web开发中,使用JavaScript实现HTML表格(table)单元格的点击展开和隐藏效果是一个常见的需求,这通常用来实现如详细信息的查看和收起功能。本文将详细解读如何使用JavaScript及jQuery库来实现该效果。 首先,要...

    vue+elementui实现点击table中的单元格触发事件--弹框

    `el-table`接受`data`属性来绑定数据源,`border`属性用于添加边框样式,而`style="width: 100%"`则设置表格宽度为100%以占据容器的全部宽度。 ```html &lt;el-table :data="tableData" border style="width: 100%"&gt; `...

    javascript动态添加table

    在HTML中,表格由`&lt;table&gt;`元素创建,其中包含`&lt;tr&gt;`(行)元素,`&lt;th&gt;`(表头单元格)和`&lt;td&gt;`(数据单元格)。表格可以通过`&lt;thead&gt;`,`&lt;tbody&gt;`和`&lt;tfoot&gt;`元素来组织结构,分别代表表头、主体和表脚。 2. **...

    读取json数据动态生成table

    在JavaScript(JS)开发中,动态地从JSON(JavaScript Object Notation)数据中读取信息并将其呈现到HTML表格(table)中是一项常见的任务。JSON因其简洁、易读且易于处理的特性,常用于存储和交换结构化数据。在这...

Global site tag (gtag.js) - Google Analytics