超级简单的jquery操作表格方法


Posted in Javascript onDecember 15, 2014

本文实例讲述了超级简单的jquery操作表格方法。分享给大家供大家参考。具体实现方法如下:

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

<script language="javascript" src="./jquery.js"></script>

<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">

<tr id="1"><td width="30%">1</td>

<td width="30%">2</td>

<td width="30%">3</td></tr>

<tr id="2"><td width="30%">11</td>

<td width="30%">22</td>

<td width="30%">33</td></tr>

</table>

<table border="1px #ooo" id="test1" name="test1" cellpadding="0" cellspacing="0" width="20%"> <tr id="4"><td width="30%">1</td>

<td width="30%">2</td>

<td width="30%">3</td>

</tr>

</table>

<input type="button" name="button" value="add" onclick="addtr('test');">

<input type="button" name="button" value="del" onclick="deltr('test');">

<script> //在id为test的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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css"> .cl1{ background-color:#FFFFFF; } .cl2{ background-color:#FFFF99; } </style>

<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

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 id="testTable" border="1" width="500"> <tr>

<td>序号</td> <td onmouseover="mover(1);" onmouseout="mout(1);">内容</td>

<td onmouseover="mover(2);" onmouseout="mout(2);">操作</td> </tr>

</table>

<input type="button" value="添加行" onclick="addRow();"/>

<input type="button" value="添加列" onclick="addCol();"/>

</body>

jquery操作表格(添加/删除行、添加/删除列)

<!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>

<!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=utf-8" />

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

<meta name="keywords" content="我的百分之一,我的百分之一女装店,我的百分之一商城,我的百分之一淘宝" />

<meta name="description" content="我的百分之一淘宝三金冠女装店官方网站100f1.com,仅为百分一有品位的美女!我的百分之一商城每月发布新款时尚女装和潮流服饰女装搭配。" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

</head>

<body>

<div id="wrap" class="wrap">

<div class="fatie" id="fatie">

<dl class="options">

<dd>选项<span>1</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>

<dd>选项<span>2</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>

<dd>选项<span>3</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>

<dd>选项<span>4</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>

<dd>选项<span>5</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>

</dl>

<p class="add_opt">

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

</p>

</div>

</div>

</body>

<script type="text/javascript">

$(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程序设计有所帮助。

Javascript 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
node.js中的fs.link方法使用说明
Dec 15 #Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 #Javascript
jQuery中的编程范式详解
Dec 15 #Javascript
node.js中的fs.symlink方法使用说明
Dec 15 #Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 #Javascript
node.js中的fs.utimes方法使用说明
Dec 15 #Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 #Javascript
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
Javascript 面向对象 命名空间
2010/05/13 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
关于安全的演讲稿
2014/05/09 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
2014年工人工作总结
2014/11/25 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技