<!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来...
本文将深入探讨如何使用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，我们可以对这些元素...
在JavaScript（JS）编程中，动态增加和删除行是一项常见的任务，特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户...无论使用哪种方法，理解和掌握动态增加删除行的原理对于任何前端开发者都是必要的。