<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../../jquery-1.7.js"></script>
</head>
<body>
<table border="1" id="tableAdd">
<tr align="center">
<td width="100px;">展馆</td>
<td width="100px;">展位类型</td>
<td width="100px;">数量</td>
<td width="100px;">
<input type="button" value="新增" id="addRow"/>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var rowNum=0;
//新增行
$("#addRow").bind("click",function(){
rowNum +=1;
var rowHtml="";
rowHtml +="<tr id='"+rowNum+"'>";
rowHtml +="<td>"+rowNum+"</td>";
rowHtml +="<td></td>";
rowHtml +="<td></td>";
rowHtml +="<td>";
rowHtml +="<input type=\"button\" value=\"删除\" name=\"deleteRow\" onclick=\"deleteRow("+rowNum+")\" />";
rowHtml +="</td>";
rowHtml +="</tr>";
//alert(rowHtml)
$("#tableAdd").append(rowHtml);
})
})
//删除行
function deleteRow(num){
$("#addRow").parent().parent().parent().find("#"+num).remove();
}
</script>
分享到：
相关推荐
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
使用javascript实现table动态增加删除行列。
本文将深入探讨如何使用JavaScript来动态地增加和删除表格（Table）的行。 首先，我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素、`<tr>`（表格行）元素、`<td>`（表格数据单元格）元素组成。如果...
javascript增加和删除table行及验证和遮罩 javascript增加和删除table行及验证和遮罩 javascript增加和删除table行及验证和遮罩
1. 选择表格和行：使用jQuery选择器定位到表格和目标行。 2. 创建新行：准备要插入的新行的HTML代码。 3. 插入行：使用`.after()`或`.before()`方法在适当的位置插入新行。 4. 删除行：找到选中的行，然后使用`....
在处理表格（Table）元素时，JavaScript可以帮助我们实现实时的动态操作，比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先，我们需要了解HTML中的`<table>`元素。它用于创建表格，...
javascript添加删除table行
一个表格由`<table>`元素定义，其中包含`<tr>`（表格行）元素，`<td>`（表格数据单元格）和`<th>`（表头单元格）元素。在JavaScript中，我们可以直接操作DOM（文档对象模型）来创建、修改或删除这些元素。 1. **...
table动态增加一行，点击增加可增加，点击删除可以进行删除
这篇博客“JS example：点击按钮table增加一行，删除一行”提供了具体的示例，帮助开发者掌握这一技能。 首先，让我们理解基本概念。HTML表格由`<table>`元素定义，`<tr>`元素表示表格行，`<td>`元素表示单元格，而...
开发者可以轻松实现数据的增加、删除、排序以及选择等功能。 ### 复选框在layui-table中的使用 在layui-table中，若要在表格中添加复选框，通常需要在`th`标签中使用`lay-data`属性来指定复选框的类型。例如，在...
总的来说，"table行增加"是Web开发中的基础功能，理解和掌握这一技巧对于提升用户体验和开发效率至关重要。通过学习和实践这个zip文件中的代码，开发者可以更深入地了解如何利用jQuery实现这一功能，并在实际项目中...
本文将深入探讨如何在Angular Material表格（table）中实现自动增加和删除功能，以及解决在这个过程中可能遇到的问题。 Angular Material表格是数据展示的利器，它允许开发者动态地展示数据并提供交互性。在创建...
对表格的行和列进行插入/删除，并对每行添加行号
本文实例为大家分享了bootstrap table双击可编辑的具体代码，供大家参考，具体内容如下 html： <table class=table id=para_table> 名称 值 操作 <td style=tex
对于动态地在网页上的table增加行和删除行的操作，是非常常见的需求，尤其在处理动态数据展示的场景中。以下是对在JavaScript中实现对table增加行和删除行操作的详细知识点说明。 ### 增加行的操作方法 增加行通常...
在网页开发中，动态增加table行是一项常见的需求，特别是在数据展示和交互丰富的应用中。这个功能使得用户可以在表格中实时添加、编辑或删除数据行，提供了更好的用户体验。下面将详细解释这一技术及其相关知识点。 ...
### JavaScript 完整操作 Table 的增加行与删除行知识点详解 #### 一、引言 在 Web 开发中，表格（Table）是非常常见的一种数据展示形式。JavaScript 提供了丰富的 API 来操作 DOM（Document Object Model），使得...
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含，其中包含`<tr>`（表格行）元素，每行内可以有多个`<td>`（表格数据单元格）或`...
当用户在前端删除某行并保存时，后端需要接收这个请求，更新相应的数据表，并返回确认信息。这里可能会用到诸如RESTful API的设计原则，以及相关的验证和授权机制，确保数据的安全性和一致性。 综上所述，"表格删除...