超级简单的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 相关文章推荐
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
常用的9个JavaScript图表库详解
Dec 19 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
js单线程的本质 Event Loop解析
Oct 29 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
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
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
ES6新特性一: let和const命令详解
2017/04/20 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
python基础之入门必看操作
2017/07/26 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
基于python实现模拟数据结构模型
2020/06/12 Python
用Python进行websocket接口测试
2020/10/16 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
会计电算化毕业生自荐信
2014/03/03 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书