<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="jquery-1.3.2.js"></script>
<script>
var colNum=6;
function addCol(){
var tablehead=$("#colName").val();
var currentNum=colNum+1;
$("#lb tr").each(function(i,v){
if(i==5){
$(this).html($(this).html().replace("colSpan="+colNum,"colSpan="+currentNum));
colNum++;
return;
}
var lastTD=$("#"+$(this).attr("id")+" td:last-child");
if(i==0)
$("#"+$(this).attr("id")+" td:last-child").after(lastTD.clone().html(tablehead));
else if(i==1){
$("#"+$(this).attr("id")+" td:last-child").after(lastTD.clone().html("设置"));
}else{
$("#"+$(this).attr("id")+" td:last-child").after(lastTD.clone())
}
});
}
function delCol(){
var currentNum=colNum-1;
$("#lb tr").each(function(i,v){
if($(this).children().length<=3)
{
return;
}
if(i==5){
$(this).html($(this).html().replace("colSpan="+colNum,"colSpan="+currentNum));
colNum--;
return;
}
$("#"+$(this).attr("id")+" td:last-child").remove();
});
}
</script>
</head>
<body >
<center>
<table align="center" id="lb" class="list" >
<tr id="tr1">
<td width="8%" bgcolor="#D0DEF0">姓名</td>
<td width="13%" bgcolor="#D0DEF0">所在部门</td>
<td width="11%" bgcolor="#D0DEF0">所任职位</td>
<td width="13%" bgcolor="#D0DEF0">基薪</td>
<td width="13%" bgcolor="#D0DEF0">岗薪</td>
<td width="15%" bgcolor="#D0DEF0">入职时间</td>
</tr>
<tr onMouseOver="changeto()" onMouseOut="changeback( '0' )" id="tr2">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>设置</td>
</tr>
<tr onMouseOver="changeto()" onMouseOut="changeback( '1' )" id="tr3">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="changeto()" onMouseOut="changeback( '0' )" id="tr4">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="changeto()" onMouseOut="changeback( '1' )" id="tr5">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr >
<td colspan="6" align="center" ><div>
<label>
<span class="arrow"><a href="#" class="b">9</a> <a href="#" class="b">3</a> <a href="#" class="b"> 4</a><a href="#" class="b"> :</a></span> 共10条记录 每页5条 转到
<input name="textfield3222" type="text" class="field"style="width:30px;height:20px" />
页 <img src="../../../images/btn_go.gif" width="20" height="20" align="absmiddle" > <input type="text" id="colName" class="field" /> <input type="button" id="addCol" onClick="addCol()" class="button" value="添加列"/> </label>
<input type="button" id="addCol2" class="button" value="删除列" onClick="delCol()"/>
</div></td>
</tr>
</table>
</center>
</body>
</html>
分享到：
相关推荐
在网页开发中，jQuery库因其简洁的语法和强大的功能，被广泛用于处理DOM操作，包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先，我们来理解HTML表格的基本结构。一个表格由`...
本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`<table>`元素定义，每一行由`<tr>`元素...
jquery脚本实现动态添加列，删除指定列
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行与列，在学习jQuery的过程中，自己试着在网上找寻教程，发现都不符合自己的需要，所以就动手改写了一份简单的diy表格。目前实现动态增加 删除最后一行...
在这个“jquery动态增加修改删除表格,上移下移功能”的项目中，开发者利用jQuery实现了对表格的动态操作，这在网页数据展示和管理中非常常见。 首先，我们来理解这个项目的标题：“jquery动态增加修改删除表格,上移...
本主题聚焦于如何使用jQuery实现表格中添加和删除行的功能，这在数据展示和用户交互中非常常见。通过点击按钮动态添加或删除表格行，可以提高用户的交互体验，使得数据管理更加灵活。 首先，我们需要创建一个基本的...
- 标签中提到的“jquery 添加删除 tr td”说明了文档主要讲述的内容，即使用jQuery对表格中的行和列进行动态的添加和删除操作。 - 描述中提到“需要的朋友可以参考下”，说明该文档是面向需要进行相关操作的开发者...
本篇文章将深入探讨如何使用jQuery来实现一个可编辑的表格，这在数据展示和用户交互方面具有广泛的应用。 首先，让我们了解基本概念。jQuery的核心特性包括选择器（用于查找HTML元素）、DOM操作（添加、删除或修改...
2. **动态插入和删除行/列**：使用`.append()`和`.remove()`方法来动态添加或移除表格内容。例如，可以创建一个新的行(`$('tr').append('<tr><td>新数据</td></tr>')`)，或者删除选中的行(`$('tr:selected').remove...
这种可删除列的功能可能通过事件监听、DOM操作或者使用特定的前端库（如jQuery UI、ExtJS、Ag-Grid等）来实现。 2. **后端技术**：后端负责处理数据的增删改查操作，通常使用PHP、Python、Java、C#等服务器端语言。...
本教程将详细讲解如何使用jQuery来实现动态添加和删除表格行，这在数据展示和用户交互中非常常见，特别是在需要实时更新或编辑数据的场景下。 一、jQuery基础 在开始之前，我们需要确保网页已经引入了jQuery库。...
// 类似的，可以为添加和删除列的按钮绑定事件 ``` 总结，jQuery提供了强大的DOM操作功能，使得在网页上动态管理表格变得简单。通过上述方法，你可以轻松地实现在表格中添加、删除行和列，为用户提供更灵活的数据...
本资源主要探讨的是如何使用jQuery实现动态添加和删除表格行的特效，这对于构建交互性强的网页表格非常有用。以下将详细讲解相关知识点。 首先，jQuery提供了方便的DOM操作方法，如`append()`和`remove()`，可以...
本文将深入探讨如何使用jQuery实现一个可编辑的表格，这将帮助开发者提高用户体验，允许用户直接在表格中修改数据。 首先，我们需要理解jQuery的核心特性：DOM操作、事件处理和动画效果。jQuery库简化了JavaScript...
本教程将深入探讨如何使用jQuery实现表格的增加、修改、删除和保存功能，这些功能是许多Web应用程序的核心部分，特别是在数据管理界面中。 ### 增加 在jQuery中，增加表格行通常是通过动态创建`<tr>`元素并将其...
本资源“jQuery表格增加删除行响应式代码.zip”提供了实现动态表格功能的示例代码，尤其适用于响应式设计，使表格在不同设备上都能保持良好的用户体验。 响应式设计是现代网页开发的关键特性，它确保网站在桌面、...
在jQuery中，可以使用`$('table').append('<tr><td>新内容</td></tr>')`来动态添加行，通过改变`<tr>`和`<td>`的数量来应对不规则表格的列变化。 6. **事件处理**： jQuery的事件监听器，如`click()`, `change()`...
- **编辑与操作**：允许用户对表格中的数据进行添加、编辑和删除等操作。 - **自定义样式**：通过CSS可以轻松定制表格样式，满足个性化需求。 - **事件处理**：提供多种事件回调，如展开/折叠、点击等，便于扩展功能...
一旦选择了表格，我们就可以进行一系列的操作，比如添加、删除或修改表格行（`<tr>`）、列（`<td>`）或单元格（`<th>`）。 例如，如果你想要在表格的末尾添加一行，可以使用`append()`函数： ```javascript $("#...