`

js动态添加表格

阅读更多
  1. <script type="text/javascript">   
  2.         //全局变量   
  3.         var i=0;   
  4.         //添加行   
  5.         function addMyRow(){   
  6.             var mytable = document.getElementById("mybody");   
  7.             var mytr = mytable.insertRow();   
  8.             mytr.setAttribute("id","tr"+i);   
  9.             var mytd_1=mytr.insertCell();   
  10.             var mytd_2=mytr.insertCell();   
  11.             var mytd_3=mytr.insertCell();   
  12.             var mytd_4=mytr.insertCell();   
  13.             var mytd_5=mytr.insertCell();   
  14.             mytd_1.innerHTML="<input type='text' name='myname"+i+"'/>";   
  15.             mytd_2.innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女";   
  16.             mytd_3.innerHTML="<input type='checkbox' name='mylove"+i+"' value='1'/>上网<input type='checkbox' name='mylove"+i+"' value='2'/>篮球<input type='checkbox' name='mylove"+i+"' value='3'/>游泳";   
  17.             mytd_4.innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>";   
  18.             mytd_5.innerHTML="<input type='button' value='删除' onclick=\"delMyRow('"+i+"')\"/>";   
  19.             i++;   
  20.         }   
  21.         //删除当前行   
  22.         function delMyRow(j){   
  23.             var mytable = document.getElementById("mybody");   
  24.             var myrow = document.getElementById("tr"+j);   
  25.             mytable.deleteRow(myrow.rowIndex-1);   
  26.         }   
  27.         //删除所有行   
  28.         function delAllMyRow(){   
  29.             var mytable = document.getElementById("mybody");   
  30.             var rowlen=mytable.rows.length;   
  31.             for(var i=rowlen-1;i>=0;i--){   
  32.                 mytable.deleteRow(i);   
  33.             }   
  34.         }   
  35.         </script>  

 

 

 

 

分享到:
评论

相关推荐

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    JavaScript动态添加表格行(使用模板、标记)

    在JavaScript编程中,动态添加表格行是一项常见的任务,特别是在创建数据展示或编辑功能时。本文将深入探讨如何使用模板和标记技术来实现这一功能。首先,我们先了解一下基本概念。 **1. 模板(Template)** 模板是...

    javascript动态添加表格数据行(ASP后台数据库保存例子)

    通过上述知识点的说明,我们可以看到整个动态添加表格数据行和保存到数据库的过程,涉及前端的HTML、JavaScript以及后端的ASP和数据库技术。这种前后端协同工作的模式在现代Web应用开发中非常常见,充分体现了Web...

    动态添加js,动态添加表格和删除表格,批量添加记录,批量添加

    动态添加js,动态添加表格和删除表格,批量添加记录,批量添加

    JavaScript动态添加删除表格行

    1. **添加表格行**: 要动态添加一行,首先需要获取到表格的引用,通常是通过`document.getElementById`或`document.querySelector`来实现。然后,创建一个新的`&lt;tr&gt;`元素,并为它添加需要的`&lt;td&gt;`子元素。最后,...

    javascript 表格行列动态添加

    在用户通过JavaScript动态添加表格行后,这些数据可以通过AJAX异步提交到服务器。使用`XMLHttpRequest`对象或者现代浏览器支持的`fetch` API,我们可以将表格的新状态发送到后台,然后更新formbean的String数组: `...

    动态添加Table表格

    `WebCalendar.js`可能是用于处理日期选择或日历功能的JavaScript文件,但与动态表格的创建直接关系不大。`fp.sql`可能是数据库脚本,用于创建或填充数据。`App_Code`目录通常用于存放自定义的类库代码,而`App_Data`...

    javascript动态创建表格

    JavaScript 动态创建表格知识点总结 JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用,特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两...

    JavaScript实现动态添加表格中的行

    在JavaScript编程中,动态添加表格行是一个常见的需求,特别是在数据可视化或者用户交互丰富的网页应用中。这个功能允许我们在用户操作或者接收到服务器数据时,实时地向HTML表格中插入新的行,更新显示的信息。以下...

    js动态添加删除表格

    要动态添加表格行,首先需要获取到表格对象,通常是通过`document.getElementById`或`document.querySelector`来定位`&lt;table&gt;`元素。然后,创建新的`&lt;tr&gt;`元素,并在其内部添加`&lt;td&gt;`元素。最后,将新行插入到表格...

    js动态添加表格逐行添加、删除、遍历取值的实例代码

    在处理Web前端交互时,经常会遇到需要动态地对表格进行操作的场景,如动态添加表格行、删除表格行、遍历表格取值等。本文将详细阐述如何使用JavaScript来实现这些功能,并给出具体的代码示例。 ### 动态添加表格行 ...

    javascript动态操作表格

    首先,让我们从添加表格开始。在HTML中,表格由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)等标签组成。使用JavaScript,我们可以动态创建这些元素并插入到文档中。例如: ```javascript // 创建一个新的表格 var ...

    JQuery_可拖曳动态添加表格、动态排序

    JQuery 可拖曳动态添加表格、动态排序 JQuery 是一个流行的 JavaScript 库,提供了丰富的功能来简化 Web 开发。今天,我们将探讨如何使用 JQuery 实现可拖曳动态添加表格、动态排序的功能。 可拖曳动 可拖曳动是 ...

    javascript 动态添加表格行

    表格部分代码如下: ”testTbl” border=1&gt; ”tr1″&gt; &lt;td width=6%&gt;&lt;input type=checkbox id=”box1″&gt; ”b”&gt;第一行 ”tr2″&gt; &lt;td width=6%&gt;&lt;input type=checkbox id=”box2″&gt; ”b”&gt;第二行 ...

    JavaScript中动态向表格添加数据

    在JavaScript中,动态向表格添加数据是一项常见的任务,特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作,尤其是DOM(文档对象模型)的操作。以下是对标题和描述中所涉及知识点的...

    JavaScript 动态添加表格行 使用模板、标记

    标题:“JavaScript 动态添加表格行 使用模板、标记”描述了在客户端使用JavaScript技术动态地向网页表格中添加新的行的操作方法。在Web开发中,经常需要在不重新加载页面的情况下动态更新表格内容,JavaScript提供...

    js动态生成表格

    在JavaScript(JS)中动态生成表格是一项常见的任务,特别是在网页交互和数据展示中。这篇文章将深入探讨如何利用JS实现这一功能,以及相关的源码和工具。 首先,我们要明白HTML表格的基本结构,它由`&lt;table&gt;`、`...

    原生js可编辑表格实现动态添加表格行数和删除表格行数

    在JavaScript(JS)中,创建一个可编辑的表格并实现动态添加和删除行的功能是一项常见的需求,尤其是在构建数据管理界面时。以下将详细介绍如何利用原生JavaScript实现这一功能。 首先,我们需要在HTML中创建一个...

Global site tag (gtag.js) - Google Analytics