<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!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>
<title></title>
<script src="js/jquery-1.4.1.min.js" mce_src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function addCol() {
$col = $("<td>增加的列</td>");
$("#tab1>tbody>tr").append($col);
}
function delCol() {
//移除最后一列
$("#tab1 tr :last-child").remove();
//移除第一列
//$("#tab1 tr :first-child").remove();
//移除指定的列, 注:这种索引从1开始
//$("#tab1 tr :nth-child(2)").remove();
//移除第一列之外的列
//$("#tab1 tr :not(:nth-child(1))").remove();
}
</script>
</head>
<body>
<input id="Button1" type="button" onclick="addCol()" value="增加列" />
<input id="Button2" type="button" onclick="delCol()" value="减少列" />
<table id="tab1" border="1" style="width: 200px;">
<tbody>
<tr>
<td> 1</td>
<td> hello</td>
</tr>
<tr>
<td>2</td>
<td>world</td>
</tr>
<tr>
<td>3</td>
<td>王子饼</td>
</tr>
</tbody>
</table>
</body>
</html>
<!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>
<title></title>
<script src="js/jquery-1.4.1.min.js" mce_src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function addCol() {
$col = $("<td>增加的列</td>");
$("#tab1>tbody>tr").append($col);
}
function delCol() {
//移除最后一列
$("#tab1 tr :last-child").remove();
//移除第一列
//$("#tab1 tr :first-child").remove();
//移除指定的列, 注:这种索引从1开始
//$("#tab1 tr :nth-child(2)").remove();
//移除第一列之外的列
//$("#tab1 tr :not(:nth-child(1))").remove();
}
</script>
</head>
<body>
<input id="Button1" type="button" onclick="addCol()" value="增加列" />
<input id="Button2" type="button" onclick="delCol()" value="减少列" />
<table id="tab1" border="1" style="width: 200px;">
<tbody>
<tr>
<td> 1</td>
<td> hello</td>
</tr>
<tr>
<td>2</td>
<td>world</td>
</tr>
<tr>
<td>3</td>
<td>王子饼</td>
</tr>
</tbody>
</table>
</body>
</html>
相关推荐
用jquery实现table拖拽列功能，可动态改变表格列宽度，并且实现table表格100%的问题，如果列缩小，则自动拉伸最后一列以实现table100%的效果，如果拉伸长度比原长度大，则显示x滚动条。
日常开发中，经常遇到表格里需要自动合并单元格，考虑到写服务器控件比较消耗性能，因些还是把这种工作交给客户端Javascript去做吧，基于习惯用jquery框架，所以封装了一个Jquery插件。
功能实现：点击添加按钮，表格增加一行并给其name属性赋予的值，方便获取 点击删除，自动删除这一行 JQuery中定义一个count变量 var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows....
DataTables是一个jQuery插件，能够让HTML表格很方便地实现分页、过滤和多栏排序等功能。DataTables可以使用本身自带的CSS样式，但还可以按自己的需要自定义CSS样式。它具有以下特征： •自适应栏宽 •可保存表格...
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点： 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动...
现在任何事务都追求效率和人性化，当然网页效果也是如此，如果一个可以编辑数据的表格，编辑到最后一行的时候，点击可以自动添加一行，这样算是一个比较人性化的效果，可以免去一丝劳顿之苦，下面分享一段这样的代码
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。 官方网站及其下载地址：http:/www.datatables.net 当前最新版为1.10.2，读者可点此本...
可调整大小colResizable是一个免费的jQuery插件，旨在通过手动拖动列锚来增强任何类型HTML表对象，从而增加列大小调整功能。 它与鼠标和触摸设备兼容，并具有一些不错的功能，例如页面刷新或回发后的布局持久性以及...
数据表格添加分页组件 数据表格添加查询功能 数据表格添加工具条 数据表格设置冻结列 动态改变数据表格列 格式化数据表格列 数据表格设置排序 数据表格自定义排序 数据表格添加复选框 数据表格自...
我们只需要使用一个简单的类名，jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。 响应式表格让页面内容在移动端和桌面设备上能够很好的适配。 响应式表格有两种类型： reflow(回流) 与 列切换。 回流表格 回流...
243 8.4 验证邮件地址 246 8.5 使用自动完成 252 8.6 导入HTML 256 8.7 取得JSON数据 259 8.8 取得XML数据 261 8.9 分页显示表格 265 8.10 小结 268 第9章 使用插件 269 9.1 对表格的任一列进行过滤，...
jQuery.inline 编辑 jQuery.inlineEdit 是 Mayank K Rastogi 的一个简单而轻量级的 jQuery 插件，它允许您内联编辑 html 表格行。 特征： 编辑列的值作为输入类型date ...对于您希望可编辑的行中的每一列，指定type和n
特性：从任意来源获取数据，包括本地或者远程数据（使用 ajax，延迟函数或插件）呈现一个容易设计的简单的 HTML 表格（没有插入 css） 简单定义列半自动排序器和寻呼器（用于远程数据，你需要编写服务器端）用于 ...
web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示，一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css...
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点： 1. 自动分页处理 2. 即时表格数据过滤 3. 数据排序以及数据类型自动检测 4...
对任何一个 table, tr 都可以添加编辑、删除功能——功能独立 2.可以自动的完成编辑、取消功能，如点击编辑， 表格内容自动变成编辑框、下拉框等， 点击取消结束编辑状态 3.添加删除、确定(即更新)事件——只需要...
[增加]增加复选框列，同时增加相应的事件和方法。 [优化]优化了显示速度 [修复]解决在IE6下表格头部文字消失的问题 [修复]解决包含在form下不能正常显示高度的问题(height设置为百分比) 布局 [增加]...
详细说明：页面会显示一个表格，可以实现自动添加/删除行、添加/删除列，然后在列里面填了数据后，点击生成可以生成Json格式文件内容。 使用说明：开发基于Jquery和easyUI 所以要使用的朋友得准备，然后就把文件...
SolrJS视图SolrJSView 是一个 JavaScript/Jquery Web 前端库，用于创建 [Apache SOLR] 的用户界面。 数据显示在表格和弹出式文档视图中。 该应用程序还可以使用 Maven 部署为任何 J2EE Web 容器中的 WAR 文件。 这个...
TedTable是一个jQuery插件，... 非常简单：设置标题元素和要显示在表中的数据，插件将自动创建带有分页的表，用于显示行数的选择框，用于每一列的搜索框以及用于每列。 我希望该插件既快速又轻巧，并且可以长期支持。