`
liss
  • 浏览: 842944 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

使用 JavaScript 获取 table 行号和列号

阅读更多

  怎样获取预定义的table的行号和列号呢?很简单,只需要了解table的几个属性值用法即可。Table的总行数可以通过标记“tr”得到,但是table的列数却不能直接获取,它需要借助rows通过标记“th”和“td”得到。
  为了更直观,下面以示例来说明如何得到行号和列号。点击Id为'MyTable'的表格的任意单元时,返回该单元的行号和列号!示例代码如下:

function getRowAndColumn()
   {
   if(!document.getElementsByTagName || !document.createTextNode)return;
   varrows=document.getElementById('MyTable').getElementsByTagName('tr');
   varcols;
   for(i = 0; i < rows.length; i++)
   {
   rows[i].onclick=function()
   {
   alert("行:"+eval(this.rowIndex + 1));
   }
   if(i=0)
   {
   colsTH =rows[i].getElementsByTagName('th');
   alert(colsTH.length);
   for(k = 0; k< colsTH.length; k++)
   {
   colsTH[k].onclick =function()
   {
   alert("列:"+eval(this.cellIndex +1));
   }
   }
   }
   else
   {
   cols =rows[i].getElementsByTagName('td');
   for(j = 0; j < cols.length; j++)
   {
   cols[j].onclick =function()
   {
   alert("列:"+eval(this.cellIndex + 1));
   }
   }
   }
   }
   }

 

分享到:
评论

相关推荐

    Jquery获得鼠标在Table上的行号列号,以及值

    至此,我们已经能够获取到鼠标在Table上点击时的行号、列号和对应位置的值。如果需要在输入行号和列号后获取值,可以创建一个函数,接收这两个参数,然后用同样的逻辑来获取数据: ```javascript function ...

    jQuery实现获取table中鼠标click点击位置行号与列号的方法

    为了获取行号和列号,我们需要找到该单元格在父`tr`(行)中的索引(列号)以及该`tr`在父`tbody`(表格体)或整个`table`中的索引(行号): ```javascript var tdSeq = $(this).parent().find("td").index($(this...

    Layui组件Table绑定行点击事件和获取行数据的方法

    其中,Table组件是一个常用的数据展示组件,它不仅可以展示数据,还提供了丰富的交互功能,比如行点击事件的绑定和获取行数据。Layui的Table组件的使用是前端开发中非常基础且重要的技能,接下来详细解析如何在Layui...

    jquery获取table指定行和列的数据方法(当前选中行、列)

    为了对表格数据进行操作,如获取用户选中的行和列数据,开发者常常需要使用JavaScript库,比如jQuery,来简化DOM操作和事件处理。在本文中,将详细介绍使用jQuery如何获取表格中指定行和列的数据,具体来说,就是...

    jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

    这里需要注意的是,索引的计数是从0开始的,因此在获取行号和列号后,需要分别加1来转换成人类可理解的计数方式。 最后,作者展示了如何利用这些行号和列号在业务处理中获取表格中特定位置的值。在示例中,作者通过...

    javascript动态添加table

    这段代码会在页面上创建一个5行3列的表格,每格填充"数据"加上行号和列号。 9. **性能优化** 当动态添加大量数据时,考虑使用`document.createDocumentFragment()`创建一个文档碎片,一次性插入到DOM中,以减少重...

    javascript操作table(增加/删除行/单元格)

    对表格的行和列进行插入/删除,并对每行添加行号

    JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享

    接着,使用document.getElementById()方法获取表格的引用,并利用createElement方法创建新的行和单元格。然后,将单元格的内容设置为“第(当前行号+10)行”,并将其添加到新创建的行中,最后将该行添加到表格&lt;table&gt;...

    JS 排序输出实现table行号自增前端动态生成的tr

    在JavaScript中,对数据进行排序并...在实际项目中,可能还需要考虑性能优化,例如使用`createDocumentFragment`批量插入元素,或者使用更现代的JavaScript语法和库(如React、Vue等)来提高开发效率和代码可维护性。

    HTML的Table数据导出excel和例子

    通过`xlsheet.Cells(X, Y)`可以访问工作表中的单元格对象,其中`X`和`Y`分别代表单元格的行号和列号。每个单元格对象都具有一系列属性和方法,例如: - `Cell.Value`: 获取或设置单元格的文本内容。 - `Cell....

    js获取表格的行数和列数的方法

    如何使用JavaScript获取一个表格的行数和列数?其实很简单,假设存在如下表格: &lt;table width=100% border=1 cellspacing=0 cellpadding=0 id=example_table&gt;                    &lt;/td&gt;

    JS选中checkbox后获取table内一行TD所有数据的方法

    标题中提到的“JS选中checkbox后获取table内一行TD所有数据的方法”,指的是通过JavaScript编程技术实现,在用户选中表格中某一行的复选框时,获取该行中所有单元格(TD)的内容。此技术主要应用于Web开发中,可以...

    js操作table行的上下移动,置顶置底

    在网页开发中,表格(Table)是一种常见的数据展示方式,而使用JavaScript进行交互式操作可以增强用户体验。本文将深入探讨如何使用JavaScript实现表格行的上下移动、置顶和置底功能,以及相关辅助操作。 首先,`js...

    javascript 动态table添加colspan\rowspan 参数的方法

    - 索引`i`和`j`代表了具体的行号和列号。在JavaScript中,数组的索引通常是从0开始的,所以第1行是`rows[0]`,第1列是`cells[0]`。 - 在设置`colSpan`和`rowSpan`属性时,属性名应当首字母大写,即`colSpan`和`...

    JS操作table大全

    本文将深入探讨如何使用JavaScript进行表格的创建、修改、删除以及实现一些特殊效果。 首先,我们从基础开始,创建一个基本的HTML表格。在HTML中,`&lt;table&gt;`元素用于定义表格,`&lt;tr&gt;`表示表格行,`&lt;th&gt;`是表头...

    tableExport插件包

    **tableExport插件包详解** ...总的来说,`tableExport`插件以其便捷的使用方式和丰富的功能,成为网页表格数据导出的理想选择。只需简单配置,就能为你的网页应用添加强大的数据导出能力,提升用户体验。

    JavaScript如何动态创建table表格

    在网页中,表格(table)是一种常见的数据展示方式,而JavaScript则提供了动态创建和操作表格的能力。本文将详细介绍两种JavaScript动态创建table表格的方法。 方法一:最原始的方法,通过`createElement()`函数...

    JS获取单击按钮单元格所在行的信息

    此外,还可以扩展这个功能,不仅获取行号,还可以获取列号,甚至获取整个行的数据。这可以通过遍历同一行的所有单元格来实现。 总的来说,JavaScript的事件处理机制和DOM操作为我们提供了强大的能力来获取用户交互...

    Jq通过td获取同行其它列td的方法

    为了获取第三列的值,可以使用`.eq(2)`选择器,因为索引是从0开始的,所以索引2对应的是第三列。然后,通过`.text()`方法获取文本内容并显示出来。 如果你需要获取其他列的值,可以调整`.eq()`的选择器索引。例如,...

Global site tag (gtag.js) - Google Analytics