<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 = " ";
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> </td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>QQ</td>
<td>MSN</td>
<td>E-mail</td>
<td>备注</td>
</tr>
</table>
</BODY>
</HTML>
分享到:
相关推荐
以下是对这个"js实现添加删除一行。每一行下面可以再添加一行。序号自动改变"知识点的详细解释: 1. **动态创建DOM元素**: - 在JavaScript中,我们可以通过`document.createElement()`方法来创建新的HTML元素,如...
在EXT中,"动态新增一行"是指在表格或者布局中,通过用户操作(比如点击按钮)来动态地添加新的行元素,这些元素可以是文本框、下拉框等交互组件。 EXT中的Column Layout是一种布局方式,适用于创建网格或表格形式...
JS实现点击按钮表新增一行
在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`<table>`元素及其相关...
要实现新增空白行,我们需要对LayUI的`tables.js`文件进行深入研究,找到数据渲染的代码段,然后在此基础上添加自定义逻辑。通常,当表格渲染数据时,我们可以通过监听`layEvent`事件,比如`done`事件,来在数据加载...
本文将深入探讨如何在C#中利用GridView控件新增一行数据,并通过jQuery实现对数据的增删改查操作。 首先,让我们详细了解GridView控件。GridView是一个服务器控件,它能够以表格形式展示数据,如数据库中的记录。它...
动态新增表格一行HTML页面源代码,用js实现的。
在JavaScript中,动态添加行和删除行是网页交互中常见的需求,特别是在表格或者列表展示数据时。这通常涉及到DOM操作,包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点: 1. DOM操作: - `...
在本例中,变量`count`被用来跟踪新插入行的编号,每次增加一行时,`count`都会递增。变量的作用域决定了它们的可见性和生命周期,本例中`count`的作用域是全局的,这意味着它可以在`add`和`del`函数中被访问和修改...
`insertTableRow`接受一个`<table>`对象和一个插入位置作为参数,并创建一个新的`<tr>`元素,其中的每个`<td>`元素的`colSpan`属性默认等于前一行的对应值。类似地,`insertTableCol`在指定位置插入新列,并根据前一...
2. **新增行**:要向表格添加新行,首先需要创建一个`<tr>`元素,然后为该行添加单元格(`<td>`)。这可以通过`document.createElement()`方法实现,最后使用`appendChild()`将新行添加到表格的`<tbody>`元素中。...
在IT领域,动态新增行是一种常见的用户界面交互设计,它主要应用于数据输入或者表格编辑的场景,例如在网页表单、电子表格或者数据库管理应用中。这种功能允许用户根据需要自定义输入数据的数量,而不仅仅局限于预设...
在“ASP.NET—005:GridView增加一行JS实现”这个主题中,我们将深入探讨如何使用JavaScript动态地在GridView中添加一行数据。 首先,了解JavaScript的基本概念至关重要。JavaScript 是一种解释型、弱类型的脚本...
1. **增加新行**:点击“增加新行”按钮后,将在表格中新增一行。 2. **删除末行**:点击“删除末行”按钮后,将移除表格的最后一行。 3. **加入日期**:点击“加入日期”按钮后,将在所有已存在的行的指定单元格内...
例如,你可以为每一行的“删除”按钮设置一个操作类`data-field="action"`,然后在初始化表格时设置`events`: ```javascript $('#table').bootstrapTable({ events: { 'click .remove': function (e, value, row...
编辑功能通常是通过点击某一行触发的。Layui提供了行工具栏,可以添加编辑按钮。在点击编辑按钮时,可以通过`layui.table选定的行数据`来获取当前选中行的数据,然后填充到弹出的编辑窗口中。编辑完成后,再次通过...
本压缩包中的"javascript 动态创建表格:新增、删除行和单元格.zip"内容着重介绍了如何使用JavaScript来动态地构建和修改HTML表格。 首先,我们要理解表格在HTML中的基本结构,它由`<table>`元素包含,内部包含`...
这样,当我们运行Vue应用时,初始会显示一行(值为1),点击“添加一行”按钮会向`customized_descs`添加新的元素,进而自动更新视图,显示新的一行。 总结一下,实现Vue中点击按钮增加一行的功能主要包括以下步骤...
Layui是一个流行的JavaScript框架,它提供了丰富的组件和API,使得这些操作变得简单易行。本示例将详细介绍如何使用Layui实现表格行的添加、编辑、删除操作,并且在编辑后如何保存数据。 首先,我们需要了解Layui的...
例如,删除第一行: ```javascript var table = document.getElementById('your_table_id'); table.deleteRow(0); ``` 4. **添加列** 添加列相对复杂,因为每个行都需要新增一个单元格。首先,获取所有行的...