JavaScript开发中超级简单的jquery操作表格方法

程序员文章站 2022-04-18 13:41:27

本文实例讲述了超级简单的jquery操作表格方法。分享给大家供大家参考。具体实现方法如下：利用jquery给指定的table添加一行、删除一行代码如下:

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

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

代码如下:

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 onmouver="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>
<p id="wrap" class="wrap">
<p 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>
</p>
</p>
</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对于显示和隐藏等常用状态的判断方法

下一篇：小米10至尊版背面+Redmi K40正面！Redmi 10官宣

JavaScript开发中超级简单的jquery操作表格方法

JavaScript编程开发中jQuery的text()方法用法分析