<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script type="text/javascript"> //添加方法 function addtr() { //var trid=0; var tab=document.getElementById("signFrame"); //添加行 var newTR = tab.insertRow(tab.rows.length); alert(tab.rows.length); //trid++; //获取序号=行索引 var xuhao=newTR.rowIndex.toString(); alert(xuhao); newTR.id = "tr" + xuhao; //添加列:序号 var newNameTD=newTR.insertCell(0); //添加列内容 newNameTD.innerHTML = xuhao; //添加列:日期 var newNameTD=newTR.insertCell(1); //添加列内容 newNameTD.innerHTML = "<input name='time" + xuhao + "' id='time" + xuhao + " size='19' onmouseover='this.style.backgroundColor=#6298E1;this.style.color=#000000;' onmouseout='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />"; //添加列:方式 var newEmailTD=newTR.insertCell(2); //添加列内容 newEmailTD.innerHTML = "<select style='width:70px;' name='way" + xuhao + "' id='way" + xuhao + "'><option value='电话'>电话</option><option value='QQ'>QQ</option> </select>"; //添加列:备注 var newTelTD=newTR.insertCell(3); //添加列内容 newTelTD.innerHTML = "<input size='60' name='remark" + xuhao + "' id='remark" + xuhao + "' type='text' onclick='showid(this)' />"; //添加列:删除按钮 var newDeleteTD=newTR.insertCell(4); //添加列内容 newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"deltr('tr" + xuhao + "')\">删除</a></div>"; } </script> <script type="text/javascript"> //删除其中一行 function deltr(trid) { //alert(trid); var tab=document.getElementById("signFrame"); var row=document.getElementById(trid); var index=row.rowIndex;//rowIndex属性为tr的索引值,从0开始 tab.deleteRow(index); //从table中删除 //重新排列序号,如果没有序号,这一步省略 var nextid; for(i=index;i<tab.rows.length;i++){ tab.rows[i].cells[0].innerHTML = i.toString(); nextid=i+1; remark=document.getElementById("remark"+nextid); remark.id="remark"; } } </script> <script type="text/javascript"> function showid(txt) {alert(txt.id); } </script> <body> <input type="button" value="保存" onclick="addtr()" /> <table border="1px" width="70%" id="signFrame"> <tr id="trHeader"> <td width="50px">序号</td> <td width="170px">时间</td> <td width="100px">方式</td> <td>备注</td> <td width="80px">操作</td> </tr> </table> </body> </html>
删除行:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script> $(function(){ $("#getAtr").click(function(){ $str=''; $str+="<tr align='center'>"; $str+="<td><input type='text' name='advTitle[]'/></td>"; $str+="<td><input type='file' name='img[]' /></td>"; $str+="<td><input type='text' name='advContent[]' /></td>"; $str+="<td><input type='text' name='advSource[]' /></td>"; $str+="<td><input type='text' name='advAuthor[]' /></td>"; $str+="<td><input type='text' name='advPosition[]' /></td>"; $str+="<td onClick='getDel(this)'><a href='#'>删除追加</a></td>"; $str+="</tr>"; $("#addTr").append($str); }); }); function getDel(k){ $(k).parent().remove(); } </script>
相关推荐
在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`<table>`元素及其相关...
本文将深入探讨如何使用JavaScript来动态地增加和删除表格(Table)的行。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素、`<tr>`(表格行)元素、`<td>`(表格数据单元格)元素组成。如果...
使用javascript实现table动态增加删除行列。
在处理表格(Table)元素时,JavaScript可以帮助我们实现实时的动态操作,比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先,我们需要了解HTML中的`<table>`元素。它用于创建表格,...
对表格的行和列进行插入/删除,并对每行添加行号
以下是对在JavaScript中实现对table增加行和删除行操作的详细知识点说明。 ### 增加行的操作方法 增加行通常可以通过`insertRow()`方法实现,它用于在指定位置插入一个新的表格行(tr)。这个方法接受一个参数,即...
总的来说,实现动态添加和删除表格行的基本步骤如下: 1. 选择表格和行:使用jQuery选择器定位到表格和目标行。 2. 创建新行:准备要插入的新行的HTML代码。 3. 插入行:使用`.after()`或`.before()`方法在适当的...
这篇博客“JS example:点击按钮table增加一行,删除一行”提供了具体的示例,帮助开发者掌握这一技能。 首先,让我们理解基本概念。HTML表格由`<table>`元素定义,`<tr>`元素表示表格行,`<td>`元素表示单元格,而...
在JavaScript中,动态地添加或删除表格数据行是常见的需求,尤其在开发交互式Web应用时。本篇文章将深入探讨如何实现这些功能,并提供相关的源码示例。 首先,我们来了解一下HTML表格的基本结构。一个表格由`<table...
在JavaScript(JS)中,对HTML表格进行操作是常见的需求,包括添加新的行或删除现有的行。这在网页动态交互中非常有用,比如用户输入数据的管理或者展示数据的增删改查功能。以下我们将详细讲解如何使用JavaScript来...
bootstrapTable实现表格内数据的添加、删除、修改、查询
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含,其中包含`<tr>`(表格行)元素,每行内可以有多个`<td>`(表格数据单元格)或`...
如果相同,那么就删除当前行的单元格,并将前一行单元格的`rowSpan`属性增加1。`rowSpan`属性定义了单元格可以跨越多少行。此过程会持续进行,直到遇到一个值与前一行不同的单元格为止。当这种情况发生时,当前的值...
接下来,我们将详细介绍如何使用 JavaScript 实现对表格的增加行和删除行操作。 ##### 3.1 删除行 在删除行的操作中,我们需要确定要删除的目标行,然后使用 `removeChild` 方法将其从表格中移除。 **函数 `...
在本主题中,我们将深入探讨如何使用纯JavaScript来实现表格(table)的行增删功能,这对于创建数据管理界面或者用户输入表单的网页特别有用。 首先,我们需要了解HTML中的`<table>`元素。`<table>`是用于展示结构...
这篇博客"JS对表格的动态增加删除行 (多个demo)"提供了实用的方法来帮助开发者实现这些功能。以下是对这个主题的详细说明: 1. **HTML表格基础**: HTML表格由`<table>`元素定义,行`<tr>`,列`<td>`(或`<th>`...
本文将深入探讨如何使用纯JavaScript实现动态的行添加与删除功能,尤其关注在特定条件下的按钮显示逻辑。这个功能通常应用于表格或者列表的管理,比如在线表单、任务列表等。 首先,我们需要创建一个基础的HTML结构...
1. **增加计算功能**:可以在 `check` 函数中加入计算逻辑,比如统计选中行所有单元格的数值之和。 2. **响应式设计**:为了让表格在不同设备上都能正常显示,可以考虑使用 CSS 媒体查询或框架如 Bootstrap 来实现...
标题 "jquery实现的可增加,删除行,可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行,以及上下移动表格中的行,提供了更灵活的数据操作体验...
在本文中,我们将深入探讨如何使用JavaScript来实现HTML表格的增加和删除功能。 首先,HTML表格是由`<table>`、`<tr>`(行)、`<th>`(表头)和`<td>`(单元格)等标签构成的。通过JavaScript,我们可以对这些元素...