超級(jí)簡(jiǎn)單的jquery操作表格方法
更新時(shí)間：2014年12月15日 11:07:23 投稿：shichen2014
這篇文章主要介紹了超級(jí)簡(jiǎn)單的jquery操作表格方法,可實(shí)現(xiàn)針對(duì)表格行與列的增加及刪除操作,是非常實(shí)用的技巧,需要的朋友可以參考下
本文實(shí)例講述了超級(jí)簡(jiǎn)單的jquery操作表格方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
利用jquery給指定的table添加一行、刪除一行
復(fù)制代碼 代碼如下:
<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>
<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動(dòng)態(tài)添加刪除表格的行和列
復(fù)制代碼 代碼如下:
<!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">內(nèi)容'+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操作表格測(cè)試</title>
</head>
<body>
<table id="testTable" border="1" width="500"> <tr>
<td>序號(hào)</td> <td onmouseover="mover(1);" onmouseout="mout(1);">內(nèi)容</td>
<td onmouseover="mover(2);" onmouseout="mout(2);">操作</td> </tr>
</table>
<input type="button" value="添加行" onclick="addRow();"/>
<input type="button" value="添加列" onclick="addCol();"/>
</body>
<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">內(nèi)容'+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操作表格測(cè)試</title>
</head>
<body>
<table id="testTable" border="1" width="500"> <tr>
<td>序號(hào)</td> <td onmouseover="mover(1);" onmouseout="mout(1);">內(nèi)容</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操作表格(添加/刪除行、添加/刪除列)
復(fù)制代碼 代碼如下:
<!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操作表格測(cè)試</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">內(nèi)容'+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)">序號(hào)</td> <td onclick="delCol(1)">內(nèi)容</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>
<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操作表格測(cè)試</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">內(nèi)容'+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)">序號(hào)</td> <td onclick="delCol(1)">內(nèi)容</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>
復(fù)制代碼 代碼如下:
<!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>我的百分之一女裝店官方網(wǎng)站|白菜園社區(qū)|4000-921001|就愛百分一</title>
<meta name="keywords" content="我的百分之一,我的百分之一女裝店,我的百分之一商城,我的百分之一淘寶" />
<meta name="description" content="我的百分之一淘寶三金冠女裝店官方網(wǎng)站100f1.com,僅為百分一有品位的美女！我的百分之一商城每月發(fā)布新款時(shí)尚女裝和潮流服飾女裝搭配。" />
<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>選項(xiàng)<span>1</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);">刪除</a></dd>
<dd>選項(xiàng)<span>2</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);">刪除</a></dd>
<dd>選項(xiàng)<span>3</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);">刪除</a></dd>
<dd>選項(xiàng)<span>4</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);">刪除</a></dd>
<dd>選項(xiàng)<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">添加更多選項(xiàng)</span>
</p>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){//投票選項(xiàng)增減控制
var fatie = $("#fatie");
var option = fatie.find(".options dd");
function list_again(){//選項(xiàng)重新排序
option.each(function(){
var i = $(this).index();
$(this).find("span").html(i+1);
})
}
fatie.find(".add_opt span").click(function(){//增加選項(xiàng)
fatie.find(".options").append('<dd>選項(xiàng)<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(){//刪除選項(xiàng)
$(this).parent().remove();
list_again();
})
})
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的百分之一女裝店官方網(wǎng)站|白菜園社區(qū)|4000-921001|就愛百分一</title>
<meta name="keywords" content="我的百分之一,我的百分之一女裝店,我的百分之一商城,我的百分之一淘寶" />
<meta name="description" content="我的百分之一淘寶三金冠女裝店官方網(wǎng)站100f1.com,僅為百分一有品位的美女！我的百分之一商城每月發(fā)布新款時(shí)尚女裝和潮流服飾女裝搭配。" />
<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>選項(xiàng)<span>1</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);">刪除</a></dd>
<dd>選項(xiàng)<span>2</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);">刪除</a></dd>
<dd>選項(xiàng)<span>3</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);">刪除</a></dd>
<dd>選項(xiàng)<span>4</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);">刪除</a></dd>
<dd>選項(xiàng)<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">添加更多選項(xiàng)</span>
</p>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){//投票選項(xiàng)增減控制
var fatie = $("#fatie");
var option = fatie.find(".options dd");
function list_again(){//選項(xiàng)重新排序
option.each(function(){
var i = $(this).index();
$(this).find("span").html(i+1);
})
}
fatie.find(".add_opt span").click(function(){//增加選項(xiàng)
fatie.find(".options").append('<dd>選項(xiàng)<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(){//刪除選項(xiàng)
$(this).parent().remove();
list_again();
})
})
</script>
</html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
相關(guān)文章
也許有時(shí)你需要在網(wǎng)站上播放一些音頻和視頻文件，也許你正在建立一個(gè)在線社區(qū)需要有分享和播放音樂和視頻的功能。下面介紹的這些免費(fèi)jQuery插件也許有你需要的。2014-11-11
jquery多行滾動(dòng)/向左或向上滾動(dòng)/響應(yīng)鼠標(biāo)實(shí)現(xiàn)思路及代碼
多行滾動(dòng)jQuery循環(huán)新聞列表代碼包括以下功能:鼠標(biāo)滑上焦點(diǎn)圖時(shí)停止自動(dòng)播放/滑出時(shí)開始自動(dòng)播放以及判斷執(zhí)行橫向或縱向滾動(dòng),感興趣的朋友可以了解下哦2013-01-01
jQuery實(shí)現(xiàn) 上升、下降、刪除、添加一行代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn) 上升、下降、刪除、添加一行代碼的實(shí)現(xiàn)方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
本文詳細(xì)介紹下使用JQuery實(shí)現(xiàn)圖片的展開和伸縮，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
今天所要分享的控件是單選按鈕，一個(gè)基于jquery擴(kuò)展漂亮的單選按鈕——RadioButton，喜歡的朋友可以收藏下2013-11-11
這篇文章主要介紹了jQuery基于Ajax方式提交表單功能,結(jié)合實(shí)例形式分析了jQuery使用ajax方式提交表單的具體步驟與常見操作技巧,需要的朋友可以參考下2017-02-02
JQuery實(shí)現(xiàn)文字無(wú)縫滾動(dòng)效果示例代碼(Marquee插件)
本篇文章主要介紹了JQuery實(shí)現(xiàn)文字無(wú)縫滾動(dòng)效果示例代碼(Marquee插件)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
jquery的相對(duì)父元素和相對(duì)文檔定位示例代碼
在開發(fā)jquery時(shí)候經(jīng)常需要用到定位,有相對(duì)父元素定位和相對(duì)文檔定位，本文為此總結(jié)下，有需要的朋友可以參考下2013-08-08
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過(guò)本文學(xué)習(xí)下吧2017-02-02
jQuery實(shí)現(xiàn)判斷滾動(dòng)條到底部
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷滾動(dòng)條到底部的相關(guān)資料,需要的朋友可以參考下2015-06-06