js 操作table
<%@ 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(" ");
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>
程序员的基础教程：菜鸟程序员
js 操作table的更多相关文章
- 第十三篇 JS 操作table表格
JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...
- js操作table倒叙显示序号的问题
今天遇到一奇葩问题,就是在js添加table时,序号是倒叙显示的,而且数据库查出来时正序的,为什么显示是倒叙的呢? 我百度一番,终于有了结果: var newRow=table.insertRow(- ...
- js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++) ...
- js操作table表格导出数据到excel方法
js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...
- js操作table
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 原生JS操作 table object HTMLTableSectionElement 对象,获取行数
<tbody id="infoTab"> <tr class="fomat"> <td class="blank&quo ...
- js操作table中tr的顺序，实现上移下移一行的效果
总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...
- js操作表格
js 操作table: insertRow(),deleteRow(),insertCell(),deleteCell()方法 表格有几行: var trCnt = table.rows.length ...
- js实现动态操作table
本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...
随机推荐
- my vim IDE 编辑器的配置
<h4>1.自定义编辑.vimrc的快捷键</h4><blockquote>"Set mapleaderlet mapleader = ",&q ...
- HDU - 6096 ：String （AC自动机，已知前后缀，匹配单词，弱数据）
Bob has a dictionary with N words in it. Now there is a list of words in which the middle part of th ...
- vector释放内存之swap方法
相信大家看到swap这个词都一定不会感到陌生,就是简单的元素交换.但swap在C++ STL中散发着无穷的魅力.下面将详细的说明泛型算法swap和容器中的swap成员函数的使用! 1. 泛型算法swa ...
- Python之contextlib库及源码分析
Utilities for with-statement contexts __all__ = ["contextmanager", "closing", &q ...
- mybatis 联表查询
一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...
- LOJ103 子串查找
题意 这是一道模板题. 给定一个字符串 A 和一个字符串 B ,求 B 在 A 中的出现次数.A 和 B 中的字符均为英语大写字母或小写字母. A 中不同位置出现的 B 可重叠. 分析 参照jklov ...
- F4NNIU 学习目录 （2018-08-22）
F4NNIU 学习目录 语言 C 语言 C 语言程序设计进阶 在线刷题 https://leetcode-cn.com/problemset/all/ 工具 Git 版本管理 在线教程 在线教程
- php查询mysql时，报超出内存错误（select count(distinct)）时
学时服务器查询教练所带人数时,使用select count(distinct(u_STRNO))时报超出内存错误.后参考“mysqld-nt: Out of memory解决方法”http://jin ...
- Dedesql数据库类详解(二次开发必备教程)(转)
http://www.dedecms.com/help/development/2009/1028/1076.html 织梦DedeCMS的二次开发不仅仅是会写写织梦的标签,会制作织梦的模板.很多时候 ...
- bzoj 4032 [HEOI2015]最短不公共子串——后缀自动机
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4032 不是 b 的子串的话就对 b 建后缀自动机,在 a 上枚举从每个位置开始的子串或者找子 ...