正文

js 操作table

IP云
IP云V管理员/4 阅读
08/09
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %><!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 id="Head1" runat="server">
<title></title>
<style type="text/css">
.select
{
background-color: gray;
}
.left
{
text-align: left;
}
.center
{
text-align: center;
}
.right
{
text-align: right;
}
table
{
border-collapse: collapse;
border: none;
}
td
{
border: solid # 1px;
border-color: Black;
empty-cells: show;
}
</style>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var createTabl = function () {
$("table tbody tr").remove();
var j = ;
while (j < ) {
var i = ;
var tr = $("<tr></tr>");
tr.attr("y", j);
while (i < ) {
var td = $("<td>" + j + "." + i + "</td>");
td.attr({ x: i, y: j });
td.click(function (event) { clickTd(event); });
tr.append(td);
i++;
}
$("table").append(tr);
j++;
};
};
createTabl(); var clickTd = function (event) {
var obj = event.srcElement ? event.srcElement : event.target;
$(obj).toggleClass("select");
if (event.ctrlKey == ) {
var rangetd = rangeTD();
$("table").find("td").each(function () {
$(this).removeClass("select");
var x = parseInt($(this).attr("x"));
var y = parseInt($(this).attr("y"));
if (x >= rangetd.x && x <= (rangetd.x + rangetd.xCount - ) && y >= rangetd.y && y <= (rangetd.y + rangetd.yCount - )) {
$(this).addClass("select");
}
});
}
}; $("#create").click(function () { createTabl() }); var getMax = function (values) {
var temp = ;
for (var i = ; i < values.length; i++) {
if (i == ) {
temp = values[i];
} else {
if (values[i] > temp) {
temp = values[i];
}
}
}
return temp;
}
var getMin = function (values) {
var temp = ;
for (var i = ; i < values.length; i++) {
if (i == ) {
temp = values[i];
} else {
if (values[i] < temp) {
temp = values[i];
}
}
}
return temp;
} $("#split").click(function () {
//补齐合并的列
$(".select[colspan]").each(function () {
var x = parseInt($(this).attr("x")) + ;
var y = parseInt($(this).attr("y"));
var colspan = parseInt($(this).attr("colspan"));
var td = $(this);
while (colspan > ) {
var newTd = getTd(x, y);
td.after(newTd);
td = newTd;
colspan--;
x++;
}
}); //补齐合并的行
$(".select[rowspan]").each(function () {
var colspan = ;
if ($(this).attr("colspan") != undefined) {
colspan = parseInt($(this).attr("colspan"));
}
var y = parseInt($(this).attr("y")) + ;
var rowspan = parseInt($(this).attr("rowspan"));
while (rowspan > ) {
var x = parseInt($(this).attr("x"));
var tr = $("table tr td[y='" + y + "']:first").parent(); var td;
tr.find("td").each(function (i, o) {
var nextX = parseInt($(this).attr("x"));
if (nextX < x) {
td = $(this);
}
}); var temp_colspan = colspan; while (temp_colspan > ) {
var newTd = getTd(x, y);
td.after(newTd);
td = newTd;
x++;
temp_colspan--;
}
rowspan--;
y++;
}
}); $(".select[rowspan]").removeAttr("rowspan");
$(".select[colspan]").removeAttr("colspan");
$(".select").removeClass("select");
}); var getTd = function (x, y) {
var td = $("<td>" + y + "." + x + "</td>");
td.attr({ x: x, y: y });
td.click(function (event) { clickTd(event); });
return td;
} $("#merge").click(function () {
if (canMeger()) {
var range_td = rangeTD();
if (range_td.xCount > ) {
$(".select:first").attr("colspan", range_td.xCount);
}
if (range_td.yCount > ) {
$(".select:first").attr("rowspan", range_td.yCount);
}
$(".select:gt(0)").remove();
$(".select").removeClass("select");
} else {
alert("不能合并");
}
}); var rangeTD = function () {
var xValues = [];
var yValues = [];
$(".select").each(function () {
xValues.push(parseInt($(this).attr("x")));
yValues.push(parseInt($(this).attr("y")));
});
var maxX = getMax(xValues);
var maxY = getMax(yValues);
var minX = getMin(xValues);
var minY = getMin(yValues);
return { x: minX, y: minY, xCount: maxX - minX + , yCount: maxY - minY + };
}; var canMeger = function () {
var range_td = rangeTD();
var selectCount = ;
$(".select").each(function () {
var rowspan = ;
var colspan = ;
if ($(this).attr("rowspan") != undefined) {
rowspan = parseInt($(this).attr("rowspan"));
}
if ($(this).attr("colspan") != undefined) {
colspan = parseInt($(this).attr("colspan"));
}
selectCount += (rowspan * colspan);
});
return selectCount == (range_td.xCount * range_td.yCount);
} $(".align").click(function () {
var textAlign = $(this).attr("gh-align");
$(".select").css("text-align", textAlign);
$(".select").removeClass("select");
}); $("#insertRow").click(function () {
var tr = $(".select").parent();
tr.find(".select").removeClass("select");
var trCopy = tr.clone(true);
trCopy.find("td[rowspan]").removeAttr("rowspan");
trCopy.find("td[colspan]").each(function () {
var x = parseInt($(this).attr("x"));
var y = parseInt($(this).attr("y"));
var colspan = parseInt($(this).attr("colspan"));
var td = $(this);
while (colspan > ) {
td.after(getTd(x + , y));
td = td.next();
colspan--;
}
});
var trIndex = parseInt(tr.find("td:first").attr("y"));
tr.prevAll().find("td[rowspan]").each(function () {
var rowspan = parseInt($(this).attr("rowspan"));
var tdY = parseInt($(this).attr("y")) + rowspan - ;
if (tdY >= trIndex) {
$(this).attr("rowspan", rowspan + );
}
}); trCopy.find("td[colspan]").removeAttr("colspan");
trCopy.find("td").empty();
trCopy.find("td").append("&nbsp;");
tr.before(trCopy); trCopy.nextAll().find("td").each(function () {
var y = parseInt($(this).attr("y")) + ;
$(this).attr("y", y);
});
}); $("#delRow").click(function () {
var tr = $(".select").parent();
//删除合并行的第一行
tr.find("td[rowspan]").each(function () {
var tdCopy = $(this).clone(true);
var rowspan = parseInt($(this).attr("rowspan"));
if ((rowspan - ) == ) {
tdCopy.removeAttr("rowspan");
} else {
tdCopy.attr("rowspan", rowspan - );
} tdCopy.attr("y", parseInt($(this).attr("y")) + );
var delX = parseInt($(this).attr("x"));
var td = null;
tr.next().find("td").each(function () {
var x = parseInt($(this).attr("x"));
if (x < delX) {
td = $(this);
}
});
if (td == null) {
tr.prepend(tdCopy);
} else {
td.after(tdCopy);
} }); var trIndex = parseInt(tr.find("td:first").attr("y"));
tr.prevAll().find("td[rowspan]").each(function () {
var rowspan = parseInt($(this).attr("rowspan"));
var tdY = parseInt($(this).attr("y")) + rowspan - ;
if (tdY >= trIndex) {
if ((rowspan - ) == ) {
$(this).removeAttr("rowspan");
} else {
$(this).attr("rowspan", rowspan - );
}
}
}); tr.nextAll().find("td").each(function () {
var y = parseInt($(this).attr("y")) - ;
$(this).attr("y", y);
});
tr.remove();
}); $("#insertCol").click(function () {
var x = parseInt($(".select").attr("x"));
$("table tbody tr").each(function () {
var td = $(this).find("td[x='" + x + "']");
if (td.size() > ) {
var newTd = getTd(x, td.attr("y"));
td.before(newTd);
td = newTd;
} else {
$(this).find("td").each(function () {
var tdX = parseInt($(this).attr("x"));
if (tdX < x) {
td = $(this);
}
});
td.attr("colspan", parseInt(td.attr("colspan")) + );
}
td.nextAll().each(function () {
$(this).attr("x", parseInt($(this).attr("x")) + );
});
});
});
$("#delCol").click(function () {
var x = parseInt($(".select").attr("x"));
$("table tbody tr").each(function () {
var td = $(this).find("td[x='" + x + "']");
if (td.size() > ) {
td.nextAll().each(function () {
$(this).attr("x", parseInt($(this).attr("x")) - );
});
if (td.attr("colspan") == undefined) {
td.remove();
} else {
var colspan = parseInt(td.attr("colspan")) - ;
if (colspan == ) {
td.removeAttr("colspan");
} else {
td.attr("colspan", colspan);
}
}
} else {
$(this).find("td").each(function () {
var tdX = parseInt($(this).attr("x"));
if (tdX < x) {
td = $(this);
}
});
if (td.attr("colspan") != undefined) {
var colspan = parseInt(td.attr("colspan")) - ;
if (colspan == ) {
td.removeAttr("colspan");
} else {
td.attr("colspan", colspan);
}
}
td.nextAll().each(function () {
$(this).attr("x", parseInt($(this).attr("x")) - );
});
}
});
}); $("table").on("mousedown", function () {
if (window.event.button == ) {
$(this).find(".select").removeClass("select");
}
});

$("table").on("contextmenu", function () {
return false;
});

$("#test").on("click", function () {
$("table td").each(function () {
$(this).empty();
$(this).append($(this).attr("y") + "." + $(this).attr("x"));
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="tool">
<input type="button" value="新建" id="create" />
<input type="button" value="合并" id="merge" />
<input type="button" value="拆分" id="split" />
<input type="button" value="插入行" id="insertRow" />
<input type="button" value="删除行" id="delRow" />
<input type="button" value="插入列" id="insertCol" />
<input type="button" value="删除列" id="delCol" />
<input type="button" value="左对齐" class="align" gh-align="left" />
<input type="button" value="居中" class="align" gh-align="center" />
<input type="button" value="右对齐" class="align" gh-align="right" />
<input type="button" value="验证" id="test" />
</div>
<div class="body">
<table border="" style="width: 100%;">
</table>
</div>
</div>
</form>
</body>
</html>

程序员的基础教程：菜鸟程序员