`

巧用javascript操作table

阅读更多

针对table给予一个名字,比如说tbl1
var oTr=tbl1.insetRow();

动态产生td

针对动态产生的tr产生td
var oTd=oTd.insertCell(); //var oTd=oTr.insertCell();

动态产生td内容

使用innerHTML
var oTd.innerHTML='<input type=text id=text1 name=text1 value=abc>';

-----------------------------------------------

对于已经存在的table中,取得td,tr对象的方式
假设已经存在table如下:
<table id=tbl1 border=1>
     <tr>
         <td>1</td>
         <td>2</td>
         <td><input type=button id=btn1 name=btn1 value=btn1></td>
     </tr>
</table>

此时如果要取得该按钮所在的td

var tdItm=window.document.activeElement.parentElement;

如果要取得该td的index

tdItm.cellIndex;

此时如果要取得该按钮所在的tr

var trItm=tdItm.parentNode;

如果要取得该tr的index

trItm.rowIndex;

分享到:
评论

相关推荐

    jquery对table中各数据的增加、保存、删除操作示例

    在处理HTML表格(table)数据时,jQuery提供了诸多方法和选择器来实现数据的增加、保存和删除操作。 首先,在前端页面中处理数据的增、删、改操作可以有效地减少服务器端的负担。在很多情况下,页面上的数据是用户...

    javascript 抽奖系统的设计与实现

    系统涵盖了定时器的设置与清除、DOM元素的操作、文件的读写等JavaScript核心知识点。 #### 二、关键技术点分析 ##### 2.1 定时器的设置与清除 定时器是实现抽奖过程中动态效果的关键技术之一。在该系统中,主要...

    40个轻量级JavaScript库

    ### 40个轻量级JavaScript库:深入探讨精选库的功能与应用场景 #### 字符串与数学函数 **Date.js** 是一款强大的日期处理库,它不仅能够处理各种日期格式,还能将日期解析成诸如“Next Thursday”或“+2 years”...

    使用jQuery 操作table 完成单元格合并的实例

    在给定的文件内容中,展示了如何使用jQuery来操作table,实现单元格合并的功能。具体步骤如下: 1. 判断表格是否具有多个tr(table row)元素,因为如果表格只有一行,那么无需进行合并操作。 2. 通过遍历表格的每...

    一个JQuery操作Table的代码分享

    JQuery 是一种快速、小巧且功能丰富的 JavaScript 库,它使得 HTML 文档遍历和操作、事件处理、...这些操作大大简化了传统JavaScript操作的复杂性,提高了开发效率,并且使得动态网页的设计和维护变得更加简单和直观。

    用jQuery获取table中行id和td值的实现代码

    首先,我们会讲解jQuery的基本概念及其如何简化JavaScript的DOM操作。随后,文章将具体展示一段代码,通过该代码我们能够实现点击表格单元格后,弹出提示框显示当前单元格的文本内容以及该单元格所在的行的id和自身...

    JQuery 动态生成Table表格实例代码

    JQuery 动态生成Table表格实例代码中主要涉及的知识点包括JQuery的基本使用、动态创建DOM元素、DOM操作方法以及事件处理。JQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和...

    jQuery表格(Table)基本操作实例分析

    ### jQuery表格(Table)基本操作实例分析知识点 #### 1. jQuery表格操作简介 jQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。表格是HTML中常见的元素,...

    jquery_ajax_table_php

    在本次的分析中,我们将讨论的主题是"jquery_ajax_table_php",其中涉及的关键技术知识点包括jQuery的AJAX操作、JSON数据处理、表单序列化以及PHP后端数据处理。 首先,我们从jQuery开始。jQuery是一个快速、小巧且...

    jQuery获取table表中的td标签(实例讲解)

    例如,通过类名和ID来选取table中的行()和单元格(),可以用来获取或者操作这些元素的内容。 3. 获取特定元素: - 使用ID选择器:例如,`$('tbody tr[sceneid=' + sceneid + ']')`可以选取具有特定sceneid属性...

    jQuery+json实现动态创建复杂表格table的方法

    首先需要了解的是,jQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互,使得Web开发变得更加容易。而JSON(JavaScript Object Notation)是一种轻量级的数据...

    用jquery.sortElements实现table排序

    在网页开发中,数据展示通常会使用表格(table)元素,而为了提供更好的用户体验,对表格数据进行排序是一项常见的需求。jQuery库提供了多种方法来实现这个功能,其中一个简洁且轻量级的选择是使用`jquery....

    jquery遍历table的tr获取td的值实现方法

    jQuery是一个快速、小巧、功能丰富的JavaScript库,它封装了JavaScript中常用的操作和功能,简化了HTML文档遍历和事件处理、动画和Ajax交互等操作。jQuery适用于多种浏览器,能够有效地减少开发者在进行DOM操作、...

    JQuery实现动态表格点击按钮表格增加一行

    本例中的动态表格操作主要是向`&lt;table&gt;`元素中插入新的`&lt;tr&gt;`元素,以及向`&lt;tr&gt;`中插入新的`&lt;td&gt;`元素。 3. 事件处理:事件处理是交互式网页编程的核心,允许响应用户的操作,例如鼠标点击。这里使用了`onclick`...

    基于Bootstrap使用jQuery实现简单可编辑表格

    Bootstrap是一个流行的前端框架,它提供了一套响应式、移动设备优先的前端工具包,用以简化网页的开发工作。jQuery则是一个快速、小巧的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。 当把...

    js-tablator:动态创建和填充 html 表格的 *small* javascript 实用程序

    4. **操作表格**: 你可以使用`table`对象的方法来执行各种操作,如`addRow()`, `deleteRow()`, `getSelectedData()`等。 ### 示例 以下是一个简单的例子,展示了如何使用js-tablator创建一个包含姓名和年龄两列的...

    TinyTable 简单实用的JS表格分页及排序插件

    TinyTable是一款轻量级的JavaScript插件,专为网页中的数据表格提供分页和排序功能。这款插件设计简洁,易于使用,对于那些不需要大型表格处理库,但又希望提升用户体验的开发者来说,是一个理想的解决方案。 一、...

    collection-js:对本机javascript数组的简单扩展,添加了分页方法

    在JavaScript中,原生数组对象提供了丰富的操作方法,如push、pop、shift、unshift、slice等,但并未内置针对大数据量分页处理的功能。`collection-js`是一个小巧的库,其目标是扩展JavaScript的数组对象,添加分页...

    运用jquery实现table单双行不同显示并能单行选中

    7. 从提供的源码参考信息“gamil:test_jquery_table”可以推测,可能存在一个在线的示例页面或相关的源码仓库,可以通过访问该地址来查看具体的实现效果或查看代码细节。 8. 由于文档内容是通过 OCR 技术扫描而来的...

Global site tag (gtag.js) - Google Analytics