`
PlayIT1024
  • 浏览: 21127 次
  • 性别: Icon_minigender_2
  • 来自: 泉州
社区版块
存档分类
最新评论

js新增一行,删除所有行,删除某一行

    博客分类:
  • js
阅读更多

 

  <script>
  function rowsAdd(){
	 var Container = document.getElementById("play");
	 var detailNum = Container.rows.length;
 	 //var _table=document.getElementById("takesheetspec");
 	 var _tr=Container.insertRow(-1);
 	 //alert(_tr.rowIndex);
 	 var _id='pd'+detailNum;
 	 for(var i=0;i<8;i++)
 	  {
 	   var _td=_tr.insertCell(i);
 	   _tr.id=_id;	
 	    switch(i)
 	     {
 	      case 0:
 	      	 _td.id="cell"+detailNum;
 	         _td.innerHTML=detailNum+"<a href='#' name='delete' onclick=tabledel("+detailNum+")>删除</a>";
 	         break;
 	      case 1:
 	         _td.innerHTML="<input type='text' size='7'>";  
 	         break;
 	      case 2:
 	         _td.innerHTML="<input type='text' size='7'>";  
 	         break;
 	      case 3:
 	         _td.innerHTML="<input type='text' size='7'>";  
 	         break;
 	      case 4:
 	        _td.innerHTML="<input type='text' size='7'>";  
 	         break;   
 	      case 5:
 	          _td.innerHTML="<input type='text' size='7'>";  
 	         break;
 	      case 6:
 	         _td.innerHTML="<input type='text' size='7'>";  
 	         break; 
 	      case 7:
 	         _td.innerHTML="<input type='text' size='7'>";  
 	         break; 
		 case 8:
		     _td.innerHTML="<input type='text' size='7'>";  
		 break;
 	     }
 	  }  	 
}
function tabledel(row)
{
	var Container = document.getElementById("play");		
		//alert(document.getElementById('index').value);	
		var _tr=document.getElementById("pd"+row);	
		row=_tr.rowIndex;
		Container.deleteRow(row);	
		var LastTrIndex = Container.rows.length;
		//var afterDel=row-1;
		row+=1;
		for(row;row<=LastTrIndex;row++) {
			var _td=document.getElementById("cell"+row);	
			var _tr=document.getElementById("pd"+row);	
			var newRow=_tr.rowIndex;
			_tr.id='pd'+newRow;
			_td.id="cell"+newRow;
			_td.innerHTML=newRow+"<a href='#' name='delete' onclick=tabledel("+newRow+")>删除</a>";
		}
}
function tabAllDel() 
{
var Container = document.getElementById("play");
Container.firstChild.removeNode(true);
//增加一行
var tr=Container.insertRow(-1);
var  cell  =  tr.insertCell(0);   
cell.innerHTML = "&nbsp;";
cell  =  tr.insertCell(1);   
cell.innerHTML = "姓名";   
cell  =  tr.insertCell(2);   
cell.innerHTML = "性别"; 
cell  =  tr.insertCell(3);   
cell.innerHTML = "年龄"; 
cell = tr.insertCell(4); 
cell.innerHTML = "QQ"; 
cell = tr.insertCell(5); 
cell.innerHTML = "MSN"; 
cell= tr.insertCell(6); 
cell.innerHTML = "E-mail";    
cell= tr.insertCell(7); 
cell.innerHTML = "备注";       
}
  </script>  

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
 <BODY> 
 <a href="#" onclick="rowsAdd()">新增行</a>
  <a href="#" onclick="tabAllDel()">删除所有行</a>
  <table id="play">
	<tr>
		<td>&nbsp;</td>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
		<td>QQ</td>
		<td>MSN</td>
		<td>E-mail</td>
		<td>备注</td>
	</tr>
  </table>
 </BODY>
</HTML>

 

分享到:
评论

相关推荐

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    以下是对这个"js实现添加删除一行。每一行下面可以再添加一行。序号自动改变"知识点的详细解释: 1. **动态创建DOM元素**: - 在JavaScript中,我们可以通过`document.createElement()`方法来创建新的HTML元素,如...

    EXT动态新增一行

    在EXT中,"动态新增一行"是指在表格或者布局中,通过用户操作(比如点击按钮)来动态地添加新的行元素,这些元素可以是文本框、下拉框等交互组件。 EXT中的Column Layout是一种布局方式,适用于创建网格或表格形式...

    JS实现点击按钮表新增一行

    JS实现点击按钮表新增一行

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

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

    LayUI table新增空白行

    要实现新增空白行,我们需要对LayUI的`tables.js`文件进行深入研究,找到数据渲染的代码段,然后在此基础上添加自定义逻辑。通常,当表格渲染数据时,我们可以通过监听`layEvent`事件,比如`done`事件,来在数据加载...

    c#中GridView新增一行,jQuery实现对数据增删改查

    本文将深入探讨如何在C#中利用GridView控件新增一行数据,并通过jQuery实现对数据的增删改查操作。 首先,让我们详细了解GridView控件。GridView是一个服务器控件,它能够以表格形式展示数据,如数据库中的记录。它...

    动态新增表格一行HTML页面源代码

    动态新增表格一行HTML页面源代码,用js实现的。

    js动态添加行和删除行

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

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

    在本例中,变量`count`被用来跟踪新插入行的编号,每次增加一行时,`count`都会递增。变量的作用域决定了它们的可见性和生命周期,本例中`count`的作用域是全局的,这意味着它可以在`add`和`del`函数中被访问和修改...

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

    `insertTableRow`接受一个`&lt;table&gt;`对象和一个插入位置作为参数,并创建一个新的`&lt;tr&gt;`元素,其中的每个`&lt;td&gt;`元素的`colSpan`属性默认等于前一行的对应值。类似地,`insertTableCol`在指定位置插入新列,并根据前一...

    纯javascript增加删除表格行

    2. **新增行**:要向表格添加新行,首先需要创建一个`&lt;tr&gt;`元素,然后为该行添加单元格(`&lt;td&gt;`)。这可以通过`document.createElement()`方法实现,最后使用`appendChild()`将新行添加到表格的`&lt;tbody&gt;`元素中。...

    动态新增行并取出所有数据

    在IT领域,动态新增行是一种常见的用户界面交互设计,它主要应用于数据输入或者表格编辑的场景,例如在网页表单、电子表格或者数据库管理应用中。这种功能允许用户根据需要自定义输入数据的数量,而不仅仅局限于预设...

    ASP.NET—005:GridView增加一行JS实现

    在“ASP.NET—005:GridView增加一行JS实现”这个主题中,我们将深入探讨如何使用JavaScript动态地在GridView中添加一行数据。 首先,了解JavaScript的基本概念至关重要。JavaScript 是一种解释型、弱类型的脚本...

    自动增加删除表格行代码(纯JS)

    1. **增加新行**:点击“增加新行”按钮后,将在表格中新增一行。 2. **删除末行**:点击“删除末行”按钮后,将移除表格的最后一行。 3. **加入日期**:点击“加入日期”按钮后,将在所有已存在的行的指定单元格内...

    BootStrap table删除指定行的注意事项(笔记整理)

    例如,你可以为每一行的“删除”按钮设置一个操作类`data-field="action"`,然后在初始化表格时设置`events`: ```javascript $('#table').bootstrapTable({ events: { 'click .remove': function (e, value, row...

    Layui表格行添加编辑删除操作和保存数据代码.zip

    编辑功能通常是通过点击某一行触发的。Layui提供了行工具栏,可以添加编辑按钮。在点击编辑按钮时,可以通过`layui.table选定的行数据`来获取当前选中行的数据,然后填充到弹出的编辑窗口中。编辑完成后,再次通过...

    javascript 动态创建表格:新增、删除行和单元格.zip

    本压缩包中的"javascript 动态创建表格:新增、删除行和单元格.zip"内容着重介绍了如何使用JavaScript来动态地构建和修改HTML表格。 首先,我们要理解表格在HTML中的基本结构,它由`&lt;table&gt;`元素包含,内部包含`...

    vue 点击按钮增加一行的方法

    这样,当我们运行Vue应用时,初始会显示一行(值为1),点击“添加一行”按钮会向`customized_descs`添加新的元素,进而自动更新视图,显示新的一行。 总结一下,实现Vue中点击按钮增加一行的功能主要包括以下步骤...

    Layui表格行添加编辑删除操作和保存数据代码

    Layui是一个流行的JavaScript框架,它提供了丰富的组件和API,使得这些操作变得简单易行。本示例将详细介绍如何使用Layui实现表格行的添加、编辑、删除操作,并且在编辑后如何保存数据。 首先,我们需要了解Layui的...

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

    例如,删除第一行: ```javascript var table = document.getElementById('your_table_id'); table.deleteRow(0); ``` 4. **添加列** 添加列相对复杂,因为每个行都需要新增一个单元格。首先,获取所有行的...

Global site tag (gtag.js) - Google Analytics