超级简单的jquery操作表格(添加/删除行、添加/删除列)

利用jquery给指定的table添加一行、删除一行

</table>

</tr>

</table>

function addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id");

tr_id++; //alert(tr_id);

str = "<tr id = '"+tr_id+"'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";

$('#'+id).append(str); } //删除id为test的table的最后一行

function deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); $('#'+tr_id).remove();

}

</script>

jQuery动态添加删除表格的行和列

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

var rowCount = 0;

var colCount = 2;

function addRow(){ rowCount++; var rowTemplate = '<tr class="tr_'+rowCount+'"><td>'+rowCount+'</td><td class="cl1">内容'+rowCount+'</td><td class="cl1"><a href="#" onclick=delRow('+rowCount+')>删除</a></td></tr>';

var tableHtml = $("#testTable tbody").html();

tableHtml += rowTemplate; $("#testTable tbody").html(tableHtml); }

function delRow(_id){ $("#testTable .tr_"+_id).hide(); rowCount--; }

function addCol(){ colCount++; $("#testTable tr").each(function(){

var trHtml = $(this).html(); trHtml += '<td onclick="delCol('+colCount+')">增加的td</td>';

$(this).html(trHtml);

});

}

function delCol(_id){ $("#testTable tr").each(function(){ $("td:eq("+_id+")",this).hide(); });

colCount--;

}

function mover(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl1");

$("td:eq("+_id+")",this).addClass("cl2"); }); }

function mout(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl2");

$("td:eq("+_id+")",this).addClass("cl1"); }); } </script> <title>jquery操作表格测试</title>

</head>

<body>

</table>

</body>

jquery操作表格(添加/删除行、添加/删除列) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery操作表格测试</title>

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>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>我的百分之一女装店官方网站|白菜园社区|4000-921001|就爱百分一</title>

</head>

<body>

</dl>

<span class="base_icon">添加更多选项</span>

</p>

</div>

</body>

$(document).ready(function(){//投票选项增减控制

var fatie = $("#fatie");

var option = fatie.find(".options dd");

function list_again(){//选项重新排序

option.each(function(){

var i = $(this).index();

$(this).find("span").html(i+1);

})

}

fatie.find(".add_opt span").click(function(){//增加选项

fatie.find(".options").append('<dd>选项<span>i</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);">删除</a></dd>');

option = fatie.find(".options dd");

list_again();

})

option.find("a").live("click",function(){//删除选项

$(this).parent().remove();

list_again();

})

</script>

</html>

超级简单的jquery操作表格(添加/删除行、添加/删除列)的更多相关文章

Jquery操作表格多出一个内容行
目录前言需求如何监听每一行点击,获取点击id 前后端问题更新,ajax异步带来的问题废弃使用HTML拼接前言我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...
jQuery操作表格（table）的常用方法、技巧汇总
摘录自:http://www.jb51.net/article/48943.htm 虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便 ...
超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
jquery操作表格合并单元格
jquery操作table,合并单元格,合并相同的行合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
jquery动态表格，动态添加表格行
转载收藏于:https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html 效果图: Html:<html> &l ...
第七章 jQuery操作表格及其它应用
1.表格变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org ...
jquery操作表格总结
返回表格行或列的索引 td是列,tr是行: <script type="text/javascript"> $(document).ready(function() ...
jquery 操作表格实例
案例1:隔行变色,滑动,点击变色以(选中取消效果)(addClass(),removeClass(),toggleClass()) Html: <h4>1.隔行变行</h4> ...
超级简单的jquery轮播图demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

python面向对象中类对象、实例对象、类变量、实例变量、类方法、实例方法、静态方法
1. 类对象和实例对象 Python中一切皆对象,Python类本身也是一种对象,类定义完成后,会在当前作用域中定义一个以类名为名字的命名空间.类对象具有以下两种操作: 可以通过“类名()”的方式实例 ...
MySql 模糊查询、范围查询
实例: SQL模糊查询,使用like比较关键字,加上SQL里的通配符,请参考以下: 1.LIKE'Mc%' 将搜索以字母 Mc 开头的所有字符串(如 McBadden). 2.LIKE'%inger' ...
Django框架(一)-Django初识
Django初识一.Web框架本质—自己实现Web框架 1.所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端 import socket sk = sock ...
[luogu4459][BJOI2018]双人猜数游戏(DP)
https://zhaotiensn.blog.luogu.org/solution-p4459 从上面的题解中可以找到样例解释,并了解两个人的思维方式. A和B能从“不知道”到“知道”的唯一情况,就 ...
【Trie】【枚举约数】Codeforces Round #482 (Div. 2) D. Kuro and GCD and XOR and SUM
题意: 给你一个空的可重集,支持以下操作: 向其中塞进一个数x(不超过100000), 询问(x,K,s):如果K不能整除x,直接输出-1.否则,问你可重集中所有是K的倍数的数之中,小于等于s-x,并 ...
【最短路Dijistra】【一般堆优化】【配对堆优化】
突然觉得堆优化$O(log_n)$的复杂度很优啊,然而第n次忘记了$Dijistra$怎么写QAQ发现之前都是用的手写堆,这次用一下$stl$ #include<bits/stdc++.h> ...
Codeforces Round #FF (Div. 1) A. DZY Loves Sequences 动态规划
A. DZY Loves Sequences 题目连接: http://www.codeforces.com/contest/446/problem/A Description DZY has a s ...
Xcode 中的IOS工程模板
1.IOS模板主要分为: Application .Framework.Other application 分为:Master-Detail Application 可以构建树形导航模式引用,生成的代 ...
手把手教你搭建nuget服务器
新建web项目工具:VS2013 版本:.Net Framework 4.6,低版本也行,不过要找到对应版本的Nuget.Server 装了NuGet客户端(百度如何安装) WebForm或MVC都 ...
原生js实现图片预览并上传
最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

超级简单的jquery操作表格(添加/删除行、添加/删除列)

超级简单的jquery操作表格(添加/删除行、添加/删除列)的更多相关文章

随机推荐

热门专题