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 ...
随机推荐
- 分布式缓冲之memcache
1. memcache简介 memcache是danga.com的一个项目,它是一款开源的高性能的分布式内存对象缓存系统,,最早是给LiveJournal提供服务的,后来逐渐被越来越多的大型网站所采用 ...
- C#的基类都有哪些方法
之前面试有被问到这个问题,平时没去注意,回答的不好,在此整理一下. 在C#中,个方法,重载的方法没有算进来: 构造函数 ToString()函数 GetHashCode函数 Equals函数 Refe ...
- WCF *.svc 自定义地址路由映射
一般在创建WCF服务时会用Serivce.svc文件访问,地址如:http://localhost/applicationname/Serivce.svc/Name 现在用路由映射成:http://l ...
- 【2】基于zookeeper,quartz,rocketMQ实现集群化定时系统
<一>项目结构图 (1)ZK协调分配 ===>集群中的每一个定时服务器与zookeeper交互,由集群中的master节点进行任务划分,并将划分结果分配给集群中的各个服务器节点. = ...
- 关于IO流的抽象类
被一个问题问愣了:java的IO里有哪些抽象类?这个一时半会儿还真记不得,只知道IO有好几类,具体有哪些抽象类从来没有去认真记过.回头仔细看了下分类和继承才发现其实就两对:字节流的抽象类是InputS ...
- the road of test
1.firefox打印兼容问题: <HTML> <HEAD> <TITLE>JavaScript利用IE内置打印控件IEWebBrowser进行打印/打印页面设置/ ...
- (转)如何修正DIV float之后导致的外部容器不能撑开的问题
本文转载自:http://blog.csdn.net/qsdnet/article/details/1534005 在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个D ...
- java代码求分数等级的输出~~~
总结:无论是switch-case-break语句 都不要忘了跳出当前循环,即break; 还有这个输入的分数我如何控制在100以内???? package com.c2; //实现分数等级的输出. ...
- 各种Java项目环境搭建-文档引用汇总记录
springmvc环境搭建 1.如何用Maven创建web项目(具体步骤) 2.springmvc环境搭建,一步一步超简单
- Oracle linux 6.3 安装11g R2 RAC on vbox
1 安装系统 Virtual box 4.3 Oracle linux 6.3 Oracle 11g r2 Make sure "Adapter 1" is enabled, se ...