超级简单的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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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
PHP编实现程动态图像的创建代码
2008/09/28 PHP
浅谈PHP的反射API
2017/02/26 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
Python中的十大图像处理工具(小结)
2019/06/10 Python
python自动发微信监控报警
2019/09/06 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
求职简历的自我评价
2014/01/31 职场文书
军训学生自我鉴定
2014/02/12 职场文书
班风口号
2014/06/18 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
为Java项目添加Redis缓存的方法
2021/05/18 Redis
python中pymysql包操作数据库方法
2022/04/19 Python