`
menjoy
  • 浏览: 422074 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

javascript动态添加删除表格及克隆表格

阅读更多
insertRow()和deleteRow()方法:
add
del
test

<script language="JavaScript">
var n=0;
function add(){
n++;
t1.insertRow().insertCell().innerHTML = 'delthis';
//t1.insertRow().insertCell().innerHTML = '';
}
function del(){
var c = document.getElementsByName('tt');
for(var i=0; i<c.length; i++)<br="">if(c[i].checked)
t1.deleteRow(i);
}
function deleteRow(obj){
t1.deleteRow(obj.parentElement.parentElement.rowIndex);
}
function test(){
for(i=0;i<t1.rows.length;i++) alert(t1.rows[i].cells[0].innerhtml);<br="">}
</script>

cloneNode()方法克隆表格:


<script language="JavaScript">
i=1
function add(){
++i;
var newTR = a1.cloneNode(true);
newTR.id="a"+i;
newTR.name="a"+i;
a1.parentNode.insertAdjacentElement("beforeEnd",newTR);
//alert(a1.parentElement.innerHTML);
}
</script>

appendChild() & removeChild()方法:(firefox only)
1234

append +remove -
 

 

分享到:
评论

相关推荐

    jquery动态添加 删除指定行元素

    在JavaScript和jQuery的世界里,动态地添加和删除DOM元素是常见的需求,特别是在处理表格数据时。本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先,我们来看动态添加行的操作。这个过程通常...

    JavaScript仿Excel表格演示

    1. **动态添加行**:在JavaScript中,可以通过DOM操作动态地创建新的表格行(`&lt;tr&gt;`元素)并插入到表格中。用户可以点击“添加行”按钮,触发一个JavaScript函数,该函数将生成新的行结构,填充默认数据,然后将其...

    JQuery动态添加和删除表格行的方法

    本文介绍了如何利用JQuery快速实现表格行的动态添加与删除功能,通过给出的实例,读者可以了解到相关技术点,如克隆HTML元素、修改元素内容、绑定事件处理器以及后端数据交互等,对于从事前端开发的人员来说具有一定...

    js操作table元素,表格的行列新增、删除汇集.txt

    根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`&lt;table&gt;`元素,尤其是对表格的行(`&lt;tr&gt;`)和列(`&lt;td&gt;`或`&lt;th&gt;`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...

    根据下拉框变化动态填加或者删除表格的行

    在网页开发中,动态地添加或删除表格行是一项常见的需求,尤其在用户需要交互式地管理数据时。本文将深入探讨如何使用DOM(Document Object Model)技术,特别是`cloneNode()`方法,来实现这个功能。结合`SELECT`...

    jquery动态增加删除表格行的小例子

    - `.appendTo()` 方法将克隆的行添加到表格的末尾,从而实现了增加行的功能。 - `.remove()` 方法用于移除选定的DOM元素,这里移除了最后一行,实现了删除行的功能。 3. **事件处理**: - `$("#btn_addtr")....

    基于jQuery实现表格数据的动态添加与统计的代码

    总的来说,通过jQuery的高效DOM操作和事件处理能力,我们可以轻松实现动态表格的功能,包括数据的添加、删除、统计以及复杂的业务逻辑。这种做法降低了代码的复杂度,提高了开发效率,使得前端开发者能够更加专注于...

    jQuery实现动态给table赋值的方法示例

    对于数组中的每个对象,我们首先克隆表格中预先定义的模板行(id为"template")。然后,我们使用jQuery的`find()`方法找到新行中的每个单元格(id分别为"id"、"url"和"title"),并使用`text()`方法将JSON对象的相应...

    jquery动态添加删除一行数据示例

    标题中的“jquery动态添加删除一行数据示例”指的是在网页中使用jQuery库来实现表格行的动态增删功能。这个功能常用于数据录入或者管理界面,允许用户在表格中增加新的记录行或移除不再需要的行。描述进一步强调了这...

    javascript操作表格并统计行数

    主要用到了元素的克隆,如何在各浏览器中兼容,并且在IE中如何统计动态操作后的行列数

    程序天下:JavaScript实例自学手册

    21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果...

    Jquery表格添加滚动条插件,固定表头

    总的来说,"Jquery表格添加滚动条插件,固定表头"这个主题涉及到前端开发中的DOM操作、事件处理、CSS样式和JavaScript插件使用。通过使用jQuery和相应的插件,我们可以提供更优秀的用户体验,使用户在浏览大数据量的...

    《程序天下:JavaScript实例自学手册》光盘源码

    21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    此外,`btn_delete.png`可能是一个删除按钮的图片,可用于实现更复杂的交互功能,如删除已添加到表格的数据。 总结,实现jQuery UI拖拽效果的关键在于正确配置`draggable`和`droppable`组件,并确保HTML结构支持...

    jquery动态增加删减表格行特效

    在Web开发中,动态地增加或删除表格行是一项常见的需求。这种功能不仅能够提高用户体验,还能根据用户的需求灵活调整数据展示方式。jQuery作为一种轻量级的JavaScript库,提供了简单易用的方法来操作DOM元素,非常...

    react-React的电子表格组件

    React是一个由Facebook维护的、用于构建用户界面的JavaScript库,它以其组件化思维著称。在React应用中,电子表格组件可以作为一个可重用的单元,负责渲染和操作表格数据。这种组件通常提供排序、过滤、分页、编辑等...

    java-script

    - **样式调整**:为了使表格更美观,可以添加 CSS 样式来调整单元格的宽度、高度等属性。 ##### 2. 可以更新数据的网页数据表格 在范例18-9中,我们将探讨如何创建一个支持数据更新的网页数据表格。这涉及到表格的...

    使用jquery为table动态添加行的实现代码

    要为table动态添加行,我们可以定义一个函数`AddRow()`,这个函数的主要工作是克隆已有的一行并将其添加到表格底部。以下是一段关键代码: ```javascript // 添加数据行 function AddRow() { var vTb = $("#TbData...

    jQuery将网页表格转换为excel文件导出代码.zip

    这段代码的工作原理是,首先克隆表格元素,然后移除表头,因为Excel会自动生成表头。接着,将表格内容转换为CSV格式,这是一个逗号分隔的文本文件,与Excel兼容。创建一个隐藏的下载链接,设置其href属性为转换后的...

Global site tag (gtag.js) - Google Analytics