本文实例讲述了超级简单的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>
<!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程序设计有所帮助。
本文向大家介绍JScript实现表格的简单操作,包括了JScript实现表格的简单操作的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JScript实现表格的简单操作,供大家参考,具体内容如下 实现思路: 1、添加时:获取当前列表的行数,在当前一行添加下一行; 2、用insertCell()方法添加一行,下标从0开始, 3、若要给新一行添加类型、响应事件,就用setAttribute
本文向大家介绍python简单操作excle的方法,包括了python简单操作excle的方法的使用技巧和注意事项,需要的朋友参考一下 Python操作Excle文件:使用xlwt库将数据写入Excel表格,使用xlrd 库从Excel读取数据。 从excle读取数据存入数据库 1、导入模块: import xlrd 2、打开excle文件: data = xlrd.open_workbook('
本文向大家介绍python win32 简单操作方法,包括了python win32 简单操作方法的使用技巧和注意事项,需要的朋友参考一下 源由 刚开始是帮朋友做一个按键精灵操作旺信的脚本,写完后各种不稳定;后来看到python可以操作win32相关的api,恰好这一段时间正在学习python,感觉练手的时候到了~~~ 下载 要注意Python版本及位数,否则会安装失败 直接到上面的地址去找合适的
本文向大家介绍JS实现简单表格排序操作示例,包括了JS实现简单表格排序操作示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现简单表格排序操作。分享给大家供大家参考,具体如下: 运行效果: 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript遍历算法
本文向大家介绍Python简单操作sqlite3的方法示例,包括了Python简单操作sqlite3的方法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Python简单操作sqlite3的方法。分享给大家供大家参考,具体如下: 更多关于Python相关内容感兴趣的读者可查看本站专题:《Python常见数据库操作技巧汇总》、《Python编码操作技巧总结》、《Python图片操作技巧总
问题内容: 我正在尝试为在表格视图单元格中按下的按钮运行一个动作。下面的代码在我的表视图控制器类中。 在我的UITableViewCell类的称为requestCell的插座中,该按钮已被描述为“是”。 我正在使用“解析”来保存数据,并且想在按下按钮时更新对象。我的objectIds数组可以正常工作,cell.yes.tag还会在日志中输出正确的数字,但是,为了正常运行查询,我无法将该数字输入“连