超级简单的jquery操作表格方法
本文实例讲述了超级简单的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>
<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>
<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>
<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>
<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程序设计有所帮助。
本文地址：https://www.stayed.cn/item/20987
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)