首页 > 代码库 > 操作表格
操作表格
<!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>
<title>Jquery 操作 Table</title>
<script src="http://www.mamicode.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<!--自定义的js start-->
<script>
$(document).ready(function () {
$("#btn1").bind("click", delOneRow),
$("#btn2").bind("click", delOneCol),
$("#btn3").bind("click", delNotAllRow),
$("#btn4").bind("click", delNotAllCol),
$("#btn5").bind("click", hiddenRow),
$("#btn6").bind("click", hiddenCol),
$("#btn7").bind("click", insertRowLast),
$("#btn8").bind("click", insertRowindex),
$("#btn9").bind("click", getCellValue),
$("#btn10").bind("click", getColValue),
$("#btn11").bind("click", getRowlValue),
$("#btn12").bind("click", myColSpan),
$("#btn13").bind("click", myColSplit),
$("#btn14").bind("click", myRowSpan),
$("#btn15").bind("click", myRowSplit),
$("#ckbAll").bind("click", checkAll),
$("#table4 tr:gt(0) td:last-child input:checkbox").bind("click",checkOne);
//鼠标移动到行变色,单独建立css类hover
//tr:gt(0):表示获取大于 tr index 为0 的所有tr，即不包括表头
$("#table1 tr:gt(0)").hover(
function () { $(this).addClass("hover") },
function () { $(this).removeClass("hover") }),
//奇偶行不同颜色
$("#table2 tbody tr:odd").css("background-color", "#bbf"),
$("#table2 tbody tr:even").css("background-color", "#ffc"),
//当然也可以单独建立css 类 odd 和 even
//$("#table2 tbody tr:odd").addClass("odd"),
//$("#table2 tbody tr:even").addClass("even"),
//点击#table3 的单元格返回 单元格索引
$("#table3 td").click(function () {
var tdSeq = $(this).parent().find("td").index($(this));
var trSeq = $(this).parent().parent().find("tr").index($(this).parent());
alert("第" + (trSeq) + "行，第" + (tdSeq+1) + "列");
})
});
//删除指定行（第二行）
function delOneRow() {
$("#table3 tr:gt(0):eq(1)").remove();
}
//删除指定列第二列
function delOneCol() {
//eq:获取子元素索引从 0 开始
$("#table3 tr th:eq(1)").remove();
//nth-child:获取子元素从 1 开始
$("#table3 tr td:nth-child(2)").remove();
}
//删除第二行外的所有行
function delNotAllRow() {
$("#table3 tr:gt(0):not(:eq(1))").remove();
}
//删除第二列外的所有列
function delNotAllCol() {
$("#table3 tr th:not(:eq(1))").remove();
$("#table3 tr td:not(:nth-child(2))").remove();
}
//隐藏指定行 第二行
function hiddenRow() {
$("#table3 tr:gt(0):eq(1)").hide();
//$("#table3 tr:gt(0):eq(1)").css("display", "none")
//显示
//$("#table3 tr:gt(0):eq(1)").css("display", "");
}
//隐藏指定列 第二列
function hiddenCol() {
$("#table3 tr th:eq(1)").hide();
$("#table3 tr td:nth-child(2)").hide();
//$("#table3 tr th:eq(1)").css("display", "none");
//$("#table3 tr td:nth-child(2)").css("display", "none");
//显示
//$("#table3 tr th:eq(1)").css("display", "");
//$("#table3 tr td:nth-child(2)").css("display", "");
}
//在最后插入新行
function insertRowLast() {
var newRow = "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table3 tr:last").after(newRow);
}
//在第二行后插入行
function insertRowindex() {
var newRow = "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table3 tr:gt(0):eq(1)").after(newRow);
}
//获得单元格内值 比如 2*3
function getCellValue() {
var v = $("#table3 tr:gt(0):eq(1) td:eq(2)").text();
alert(v);
}
//获得一列的所有值 比如第二列
function getColValue() {
var v = "";
$("#table3 tr td:nth-child(2)").each(function () {
v += $(this).text()+" ";
});
alert(v);
}
//获得一行所有值 比如第二行
function getRowlValue() {
var v = "";
$("#table3 tr:gt(0):eq(1) td").each(function () {
v += $(this).text() + " ";
});
alert(v);
}
//横向合并单元格 比如合并 第二行 第二个和第三个单元格
function myColSpan() {
$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 2);
$("#table3 tr:gt(0):eq(1) td:eq(2)").remove();
}
//拆分单元格将刚才的单元格还原
function myColSplit() {
//注意不能使用
//$("#table3 tr:gt(0):eq(1) td:eq(1)").removeAttr("colspan");
$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 1);
$("#table3 tr:gt(0):eq(1) td:eq(1)").after("<td>第二行第三列</td>")
}
//纵向合并单元格 比如和并第二行第二个单元格和第三行第二个单元格
function myRowSpan() {
$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 2);
$("#table3 tr:gt(0):eq(2) td:eq(1)").remove();
}
//纵向拆分单元格 将刚刚合并的单元格还原
function myRowSplit() {
$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 1);
//在下面行第一个单元格后插入单元格
$("#table3 tr:gt(0):eq(2) td:eq(0)").after("<td>第三行第二列</td>");
}
function checkAll() {
if ($("#ckbAll").attr("checked")) {
$("#table4 tr:gt(0) td:last-child input:checkbox").attr("checked", true);
}
else {
$("#table4 tr:gt(0) td:last-child input:checkbox").attr("checked", false);
}
}
function checkOne() {
var i = $("#table4 tr:gt(0) td:last-child input:checkbox").length;
var c = 0;
$("#table4 tr:gt(0) td:last-child input:checkbox").each(function () {
if ($(this).attr("checked")) {
c += 1;
}
else {
return false;
}
});
if (i == c) {
$("#ckbAll").attr("checked", true);
}
else {
$("#ckbAll").attr("checked", false);
}
}
</script>
<!--自定义的js end-->
<style type="text/css">
table
{
border-collapse: collapse;
border-spacing: 0;
margin-right: auto;
margin-left: auto;
width: 800px;
}
th, td
{
border: 1px solid #b5d6e6;
font-size: 12px;
font-weight: normal;
text-align: center;
vertical-align: middle;
height: 20px;
}
th
{
background-color: Gray;
}
.hover
{
background-color: #cccc00;
}
.odd
{
background-color: #bbf;
}
.even
{
background-color:#ffc;
}
</style>
</head>
<body>
<table id="table1">
<tr>
<th colspan="5" style="width: 800px;">
鼠标移动到行变色
</th>
</tr>
<tr>
<td>
第一行第一列
</td>
<td>
第一行第二列
</td>
<td>
第一行第三列
</td>
<td>
第一行第四列
</td>
<td>
第一行第五列
</td>
</tr>
<tr>
<td>
第二行第一列
</td>
<td>
第二行第二列
</td>
<td>
第二行第三列
</td>
<td>
第二行第四列
</td>
<td>
第二行第五列
</td>
</tr>
<tr>
<td>
第三行第一列
</td>
<td>
第三行第二列
</td>
<td>
第三行第三列
</td>
<td>
第三行第四列
</td>
<td>
第三行第五列
</td>
</tr>
<tr>
<td>
第四行第一列
</td>
<td>
第四行第二列
</td>
<td>
第四行第三列
</td>
<td>
第四行第四列
</td>
<td>
第四行第五列
</td>
</tr>
</table>
<br />
<table id="table2">
<tr>
<th colspan="5" style="width: 800px;">
表格奇偶行变色
</th>
</tr>
<tbody>
<tr>
<td>
第一行第一列
</td>
<td>
第一行第二列
</td>
<td>
第一行第三列
</td>
<td>
第一行第四列
</td>
<td>
第一行第五列
</td>
</tr>
<tr>
<td>
第二行第一列
</td>
<td>
第二行第二列
</td>
<td>
第二行第三列
</td>
<td>
第二行第四列
</td>
<td>
第二行第五列
</td>
</tr>
<tr>
<td>
第三行第一列
</td>
<td>
第三行第二列
</td>
<td>
第三行第三列
</td>
<td>
第三行第四列
</td>
<td>
第三行第五列
</td>
</tr>
</tbody>
</table>
<br />
<table id="table3">
<tr>
<th style="width: 160px;">
表头一
</th>
<th style="width:160px; display;">
表头二
</th>
<th style="width: 160px;">
表头三
</th>
<th style="width: 160px;">
表头四
</th>
<th style="width: 160px;">
表头五
</th>
</tr>
<tr>
<td>
第一行第一列
</td>
<td>
第一行第二列
</td>
<td>
第一行第三列
</td>
<td>
第一行第四列
</td>
<td>
第一行第五列
</td>
</tr>
<tr>
<td>
第二行第一列
</td>
<td >
第二行第二列
</td>
<td>
第二行第三列
</td>
<td>
第二行第四列
</td>
<td>
第二行第五列</td>
</tr>
<tr>
<td>
第三行第一列
</td>
<td>
第三行第二列
</td>
<td>
第三行第三列
</td>
<td>
第三行第四列
</td>
<td>
第三行第五列
</td>
</tr>
</table>
<table id="tctrl">
<tr>
<th colspan="5" style="width: 800px;">
对上面表格进行控制操作
</th>
</tr>
<tr>
<td style="width: 160px">
<input id="btn1" type="button" value="http://www.mamicode.com/删除第二行" />
</td>
<td style="width: 160px">
<input id="btn2" type="button" value="http://www.mamicode.com/删除第二列" />
</td>
<td style="width: 160px">
<input id="btn3" type="button" value="http://www.mamicode.com/删除第二行外的所有行" /></td>
<td style="width: 160px">
<input id="btn4" type="button" value="http://www.mamicode.com/删除第二列外的所有列" /></td>
<td style="width: 160px">
<input id="btn5" type="button" value="http://www.mamicode.com/隐藏第二行" /></td>
</tr>
<tr>
<td style="width: 160px">
<input id="btn6" type="button" value="http://www.mamicode.com/隐藏第二列" /></td>
<td style="width: 160px">
<input id="btn7" type="button" value="http://www.mamicode.com/插入行最后" /></td>
<td style="width: 160px">
<input id="btn8" type="button" value="http://www.mamicode.com/在第二行后插入行" /></td>
<td style="width: 160px">
<input id="btn9" type="button" value="http://www.mamicode.com/获取2*3单元格值" /></td>
<td style="width: 160px">
<input id="btn10" type="button" value="http://www.mamicode.com/获取第二列所有值" /></td>
</tr>
<tr>
<td style="width: 160px">
<input id="btn11" type="button" value="http://www.mamicode.com/获取第二行所有值" /></td>
<td style="width: 160px">
<input id="btn12" type="button" value="http://www.mamicode.com/横向合并单元格" /></td>
<td style="width: 160px">
<input id="btn13" type="button" value="http://www.mamicode.com/横向拆分单元格" /></td>
<td style="width: 160px">
<input id="btn14" type="button" value="http://www.mamicode.com/纵向合并单元格" /></td>
<td style="width: 160px">
<input id="btn15" type="button" value="http://www.mamicode.com/纵向拆分单元格" /></td>
</tr>
</table>
<br />
<table id="table4">
<tr>
<th style="width: 160px;">
表头一<input id="colCkb1" type="checkbox" />
</th>
<th style="width:160px; display;">
表头二<input id="colckb2" type="checkbox" />
</th>
<th style="width: 160px;">
表头三<input id="colckb3" type="checkbox" />
</th>
<th style="width: 160px;">
表头四<input id="colCkb4" type="checkbox" />
</th>
<th style="width: 160px;">
<input id="ckbAll" type="checkbox" />全选
</th>
</tr>
<tr>
<td>
第一行第一列
</td>
<td>
第一行第二列
</td>
<td>
第一行第三列
</td>
<td>
第一行第四列
</td>
<td>
<input id="ckb1" type="checkbox" /></td>
</tr>
<tr>
<td>
第二行第一列
</td>
<td >
第二行第二列
</td>
<td>
第二行第三列
</td>
<td>
第二行第四列
</td>
<td>
<input id="ckb2" type="checkbox" /></td>
</tr>
<tr>
<td>
第三行第一列
</td>
<td>
第三行第二列
</td>
<td>
第三行第三列
</td>
<td>
第三行第四列
</td>
<td>
<input id="ckb3" type="checkbox" /></td>
</tr>
<tr>
<td>
第四行第一列
</td>
<td>
第四行第二列
</td>
<td>
第四行第三列
</td>
<td>
第四行第四列
</td>
<td>
<input id="ckb4" type="checkbox" /></td>
</tr>
</table>
</body>
</html>
操作表格