<!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" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<title>jquery操作表格测试</title>
<script type="text/javascript">
function del(_id){
$("#testTable .tr_"+_id).html('');
var tableTr = $("#testTable .tr_"+_id).hide();
}
function addRow(){
var addRowTemplete = '<tr class="tr_'+tableCount+'"><td class="cl1">'+tableCount+'</td><td class="cl1">内容'+tableCount+'</td><td class="cl1"><a href="javascript:void(0)" onclick=del('+tableCount+');>删除</a></td></tr>';
$("#testTable tbody").append(addRowTemplete);
}
function addCol(){
$("#testTable tr").each(function(){
var trHtml ="<td onclick='delCol("+colCount+")'>曾加的td</td>";
$(this).append(trHtml);
});
}
function delCol(_id){
$("#testTable tr").each(function(){
$("td:eq("+_id+")",this).hide();
});
}
</script>
</head>
<body>
<table width="487" border="1" id="testTable">
<tr>
<td onclick="delCol(0)">序号</td>
<td onclick="delCol(1)">内容</td>
<td onclick="delCol(2)">操作</td>
</tr>
</table>
<p>
<input type="button" name="Submit" value="添加行" onclick="addRow()" />
<input type="button" name="Submit2" value="添加列" onclick="addCol()"/>
</p>
</body>
</html>
分享到：
相关推荐
<title>jQuery动态添加删除行</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> 姓名</th> 年龄</th> 操作</th> </tr> </thead> 张三</td> <td>25</td> ...
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
本文将深入探讨一个基于jQuery的表格控件，该控件实现了无刷新的添加、编辑、删除和统计功能，以VS2008为开发环境，利用Ajax技术，结合JSON数据格式，为用户提供流畅的交互体验。 一、jQuery与Ajax基础 jQuery简化...
通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....
《jQuery表格编辑添加删除行插件详解》 在网页开发中，表格是一种常见的数据展示方式，而jQuery作为JavaScript的一个强大库，提供了丰富的功能和便利的操作，使得表格的编辑、添加和删除行变得更加简单。本文将深入...
本主题聚焦于如何使用jQuery实现表格中添加和删除行的功能，这在数据展示和用户交互中非常常见。通过点击按钮动态添加或删除表格行，可以提高用户的交互体验，使得数据管理更加灵活。 首先，我们需要创建一个基本的...
JQuery对表格行的添加删除,如添加一行，删除一行
本文将深入探讨如何使用 jQuery 动态添加和删除表格行，以实现高效且用户友好的数据展示。 首先，理解 HTML 表格的基本结构至关重要。`<table>` 元素用于创建表格，`<tr>` 代表表格行，`<td>` 或 `<th>` 分别表示...
"jQuery表格编辑添加删除行代码"就是针对这一需求提供的一种解决方案，它利用JavaScript库jQuery的强大功能，实现了在表格中对数据进行编辑、添加和删除等操作。本文将详细解析这一代码实现的原理和应用。 首先，...
这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验。在网页开发中，这种功能常见于数据管理界面，便于用户对数据进行排序和编辑。 首先，我们需要理解jQuery库的基本...
2. **动态插入和删除行/列**：使用`.append()`和`.remove()`方法来动态添加或移除表格内容。例如，可以创建一个新的行(`$('tr').append('<tr><td>新数据</td></tr>')`)，或者删除选中的行(`$('tr:selected').remove...
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
在网页开发中，jQuery是...通过选择器定位元素，DOM操作方法添加或删除元素，结合事件处理和Ajax交互，可以构建出功能完善的动态表格。在实际开发中，要注意性能优化，尤其是元素数量多时，使用事件委托是很好的策略。
本文将深入探讨如何使用jQuery实现表格的添加、删除行和列的功能，以便于动态更新和管理HTML表格内容。 首先，我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素开始，包含若干`<tr>`（表格行）元素...
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
这篇博客“jquery 添加、删除表格”显然关注的是如何使用jQuery来操作HTML表格，实现动态添加和删除行的功能。这在构建数据驱动的Web应用中尤其常见，比如用户管理、订单处理或任何需要展示和编辑表格数据的场景。 ...
除了基本的添加和删除行操作，还可以结合其他jQuery方法和函数实现更复杂的功能，如数据验证、异步加载等。例如，可以使用`.serializeArray()`序列化表格数据，便于与服务器交换信息；或者使用`.clone()`复制行，...