jquery有选择性的增加和删除表格
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery有选择性的增加和删除表格相关的知识，希望对你有一定的参考价值。
删除
额。。。第一次发，这个提问的工具还搞不来，下面增加下我的要求。
就是页面上有三张不同的表格。之后有一个可选择的下拉菜单，里面分别是这三张表格的名称，你可以选择任意的表格名称，选中之后，点击增加的按钮，你选中的这张表格就在页面上显示了。点击删除之后，你刚才所增加的表格就删除了。注意，是整张表格，而不是一行。谢啦~
页面上面的三张表格是隐藏的？
点击增加按钮的时候，是把隐藏的表格显示？
点击删除按钮的时候，是把显示的表格隐藏？
补充：
以下为页面控件概述：
三个表格控件：
<table id="table1"></table>
<table id="table2"></table>
<table id="table3"></table>
一个下拉菜单控件：
<select id="select1"></select>
一个增加按钮：
<input type="button" id="btnAdd" />
一个删除按钮：
<input type="button" id="btnDelete" />
以下为js代码：
$(function ()
var $select1 = $("#select1");
var $tempTables = $(); //用于缓存table
//为select增加所有table列表
$("table").each(function ()
var id = $(this).attr("id");
$select1.append($("<option></option>").val(id).text(id));
);
//为增加按钮绑定事件
$("#btnAdd").click(function ()
//克隆选择的table，并去除id
var cloneTable = $("#" + $select1.val()).clone().removeAttr("id");
//加入页面中
$("body").append(cloneTable);
//加入缓存中
$tempTables = $tempTables.add(cloneTable);
);
//为删除按钮绑定事件
$("#btnDelete").click(function ()
//移除所有新增的table
$tempTables.remove();
//重置缓存
$tempTables = $();
);
);
代码纯手打~没测试过~有问题你给我说~应该没问题~
希望对您有帮助~
By Billskate追问
恩，你的代码大部分都没有问题，但是，我想要原先的表格是隐藏的也。
追答哦 关于html标签我只写了跟js操作相关的属性
其他需要您自己去添加
比如table的隐藏，设置样式为display:none就好了
<option value="3|5">三行五列</option>
<option value="4|4">四行四列</option>
<option value="5|3">五行三列</option>
</select><div id="content" style=""></div>--------------------------------------------
function addTable(str)
var arr = str.split("|");
var $table = $("<table width='180px' height='120px' border=1></table>");
$table.attr("name",str);
for(var i=0;i<arr[0];i++)
var $tr = $("<tr></tr>");
for(var j=0;j<arr[1];j++)
$("<td></td>").appendTo($tr);
$tr.appendTo($table);
$table.appendTo($("#content"));
$("#btnAdd").click(function()
addTable($("#sel option:selected").val());
)
$("#btnDel").click(function()
$("#content table[name='"+$("#sel option:selected").val()+"']").remove();
); 参考技术B 围观学习。
jquery 表格的增加删除和修改及设置奇偶行颜色
最近一周在学了一点点HTML, CSS, javascript，用javascript的jquery完成了一个简单的表格操作，有增加、删除和修改功能。
表格分三列，第一列是学生编号（ID号），第二列是学生姓名，第三列为学生年龄。在姓名和年龄框内输入数据，再点“Add”就可以增加数据（ID号会自动递增的生成），输入ID号再输入新的姓名和年龄点“Edit”就可以修改，删除的话输入ID号就点“Delete”就可以删除指定行。
表格最上面会及时更新当前表中行数，在输入ID时也会动态响应并更新姓名年龄输入框的内容。使程序达到了基本的可操作性。表格的表头用CSS作了颜色控制，表格中的内容也用CSS按奇偶行设置了不同的颜色。从而使界面变的更加美观。
下面是截图：
完整的代码如下(Win7+IE9测试通过)：
//by MoreWindows (http://blog.csdn.net/MoreWindows)
<html>
<head>
<script src="jquery-1.7.min.js"></script>
<script>
$(document).ready(function()
{
SetTableRowColor();
UpdataTableRowCount();
if ($.browser.msie) //判断是不是MS的ie浏览器
{
$("#id").bind("propertychange", function(){IDInputChange();});
}
else
{
document.getElementById("#id").addEventListener("input", IDInputChange, false);
}
});
</script>
<script>
//根据ID输入框的值取表格中对应内容并填充到姓名年龄的输入框中
function IDInputChange()
{
//根据id查找到指定行
var i=SearchIdInTable($("#Table tr"), $("#id").val());
if (i != -1)
{
//得到该行的数据
var name = $("#Table tr:eq(" + i + ") td:eq(1)").html();
var age = $("#Table tr:eq(" + i + ") td:eq(2)").html();
//将数据更新到对应的文本框中
$("#Name").val(name);
$("#Age").val(age);
}
else
{
$("#Name").val("");
$("#Age").val("");
}
}
//在表格的第一列中查找等于指定ID的行
function SearchIdInTable(tablerow, findid)
{
var i;
var tablerownum=tablerow.length;
for (i=1; i<tablerownum; i++)
if ($("#Table tr:eq(" + i + ") td:eq(0)").html() == findid)
return i;
return -1;
}
//用CSS控制奇偶行的颜色
function SetTableRowColor()
{
$("#Table tr:odd").css("background-color", "#e6e6fa");
$("#Table tr:even").css("background-color", "#fff0fa");
}
//更新表格当前显示的行数
function UpdataTableRowCount()
{
$("#tableRowCount").html($("#Table tr").length - 1);
}
function IncTableRowCount()
{
var tc = $("#tableRowCount");
tc.html(parseInt(tc.html()) + 1);
}
function DecTableRowCount()
{
var tc = $("#tableRowCount");
tc.html(parseInt(tc.html()) - 1);
}
</script>
<script>
$(document).ready(function()
{
//增加
$("#AddBtn").click(function()
{
var id=parseInt($("#Table tr:last td:first").html()) + 1;
var name = $("#Name").val() != "" ? $("#Name").val() : " ";
var age = $("#Age").val() != "" ? $("#Age").val() : " ";
//新增加一行
var appendstr = "<tr>";
appendstr += "<td>" + id + "</td>";
appendstr += "<td>" + name + "</td>";
appendstr += "<td>" + age + "</td>";
appendstr += "</tr>";
$("#Table").append(appendstr);
IncTableRowCount();
SetTableRowColor();
});
//编辑
$("#EditBtn").click(function()
{
//根据id查找到指定行
var i=SearchIdInTable($("#Table tr"), $("#id").val());
if (i != -1)
{
//得到新内容
var name = $("#Name").val() != "" ? $("#Name").val() : " ";
var age = $("#Age").val() != "" ? $("#Age").val() : " ";
//修改该行的二列数据
$("#Table tr:eq(" + i + ") td:eq(1)").html(name);
$("#Table tr:eq(" + i + ") td:eq(2)").html(age); //parseInt(age)也可以
}
});
//删除
$("#DeleteBtn").click(function()
{
//根据id查找到指定行
var i=SearchIdInTable($("#Table tr"), $("#id").val());
if (i != -1)
{
//删除表格中该行
$("#Table tr:eq(" + i + ")").slideUp("slow");
$("#Table tr:eq(" + i + ")").remove();
DecTableRowCount();
SetTableRowColor();
}
});
});
</script>
</head>
<body>
<p>简单的表格操作，有增加、删除和修改功能。id输入框能动态响应输入</p>
id:<input type="text" id="id" />
Name:<input type="text" id="Name" />
Age:<input type="text" id="Age" />
<input type="button" id="AddBtn" value="Add" />
<input type="button" id="EditBtn" value="Edit" />
<input type="button" id="DeleteBtn" value="Delete" />
<table id="Table" align="center" border="2" cellpadding="10" cellspacing="1" bordercolor="#FFAA00">
<caption style="font-size:15px">学生表<label id="tableRowCount"></label></caption>
<th>id</th><th>Name</th><th>Age</th>
<tr> <td>1</td> <td>MoreWindows</td> <td>24</td> </tr>
<tr> <td>2</td> <td>MW</td> <td>19</td> </tr>
</table>
</body>
</html>
<!-- css控制表头的背景颜色 css 双重标签 派生选择器-->
<style>
#Table th
{
background-color:#7cfc00;
}代码中的jquery-1.7.min.js可以到jquery的官网上下载。
写的很菜^_^，高手轻拍。
转载请标明出处，原文地址：http://blog.csdn.net/morewindows/article/details/7052188
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://www.cnblogs.com/captainbed
以上是关于jquery有选择性的增加和删除表格的主要内容，如果未能解决你的问题，请参考以下文章