`

使用javascript动态添加和删除行

阅读更多

<script type="text/javascript">
   var rnum = 1;
   function add_Row(){
      var newRow=document.all.family.insertRow(-1);
     var newcell=newRow.insertCell() ;
      newRow.bgColor='#FFFFFF';
      newcell.align='left';
      newcell.innerHTML="<input type='text' name='t1'/><input type='button' value='删除' onClick='deleteCurrentRow()'>";
      rnum++;
      document.all.family.focus();
     }
     //删除当前行
   function deleteCurrentRow(){
    //srcElement:设置或获取触发事件的对象
       var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
       document.all.family.deleteRow(currRowIndex);//table10--表格id
   }
    </script>
  </head>
  <body>
   <p align="center">
    <input type="button" onclick="add_Row();" value="测试"/>
    </p>
    <table id="family" align="center">
    </table>
  </body>

兼容火狐和IE的动态table:

	//动态添加行
			function insertRow(tbIndex,content)
			{
				 var objRow =  document.getElementById("tablecoc").insertRow(tbIndex);
				 var objCel = objRow.insertCell(0);
				 objCel.innerHTML=content;
			}
			//清空所有行
			function deleteRow(){
				 var tab = document.getElementById("tablecoc") ;
				 for (var i=0; i < tab.rows.length; i++){
				     for (var j=0;j< tab.rows.item(i).cells.length;j++) {
				      tab.rows.item(i).cells[j].innerHTML = "";
				     }
				 }
			}
 
分享到:
评论

相关推荐

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`&lt;table&gt;`元素用于创建...

    js动态添加和删除行

    同样,你可以根据需求修改这个示例,比如添加删除行的功能,或者改变单元格的内容和行为。理解这些基本原理后,就能灵活应对各种复杂的交互需求了。在实际项目中,你可能会遇到性能优化、兼容性处理、错误处理等问题...

    javascript实现表格添加删除等操作

    这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其适合初学者进行学习和实践。 首先,`students.html`文件很可能是用来展示表格结构...

    javascript动态添加表格数据行

    总结来说,这个示例展示了如何使用JavaScript在前端动态添加表格行,以及如何通过表单提交这些数据到服务器。虽然例子使用的是较旧的技术(如IE6和ASP),但基本的JavaScript逻辑仍然适用于现代Web开发。在现代Web...

    JavaScript动态操作表格,添加,删除行、列及单元格

    JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    javascript动态添加一行数据和删除数据

    利用javascript来结合html,可以动态的添加一行数据,和根据索引来删除一行数据。

    js动态添加行和删除行

    在JavaScript中,动态添加行和删除行是网页交互中常见的需求,特别是在表格或者列表展示数据时。这通常涉及到DOM操作,包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点: 1. DOM操作: - `...

    JS动态添加删除HTML元素(实例)

    3. 动态添加删除 HTML 元素:包括使用 JavaScript 实现动态添加删除 HTML 元素的技术和方法。 4. JavaScript 事件:包括事件处理函数、事件类型、事件对象等。 5. 元素操作:包括获取元素对象、添加元素、删除元素、...

    动态添加/删除表格行并提交内容到后台

    在开发Web应用时,动态添加和删除表格行是常见的需求,尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能,为初学者提供一个基础的实践指导。 首先,我们要了解...

    JSP中使用JavaScript动态插入删除输入框实现代码.docx

    JSP中使用JavaScript动态插入删除输入框实现代码 JSP(Java Server Pages)是一种基于Java技术的服务器端脚本语言,主要...通过JavaScript代码,我们可以动态地添加或删除输入框,提高了Web应用程序的交互性和灵活性。

    jquery表格动态添加删除行代码.zip

    总的来说,"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript(主要是jQuery)的示例,它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用,例如在线...

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    javascript实现动态添加删除表格行

    NULL 博文链接:https://1148130696.iteye.com/blog/1726191

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

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

    74、jquery表格动态添加删除行代码

    &lt;title&gt;jQuery动态添加删除行 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; 姓名 年龄 操作 张三 &lt;td&gt;25 &lt;td&gt;&lt;button class="delete"&gt;删除&lt;/button&gt;&lt;/td&gt; ...

    unity动态添加和删除脚本

    ### Unity动态添加和删除脚本 在Unity游戏开发过程中,我们经常会遇到需要在运行时动态地为游戏对象添加或删除脚本组件的情况。这不仅可以帮助我们实现更灵活的游戏逻辑,还可以提升程序的性能和可维护性。下面将...

    JQuery动态添加删除table行.

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能,以提高网页交互性。 一、HTML基础 首先,我们需要一个基本...

    利用jquery给指定的table动态添加一行、删除一行的方法

    1. 选择表格和行:使用jQuery选择器定位到表格和目标行。 2. 创建新行:准备要插入的新行的HTML代码。 3. 插入行:使用`.after()`或`.before()`方法在适当的位置插入新行。 4. 删除行:找到选中的行,然后使用`....

    javascript 动态添加/删除 文本框

    可以动态的添加 删除 文本框!代码几乎不用修改就直接能用,简单方便

Global site tag (gtag.js) - Google Analytics