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 ...
随机推荐
- 基功太差，怨不得天，得下苦功——WAP面试，正式招聘号角响起
WAP面试,直接考察coding能力. 面试官是一个日本先生.人超级Nice.一直朝我微笑. 简短的self-introdution后,就让写代码了. (欧巴桑昨天面的,回去后就把题目告诉我们了,我昨 ...
- MySql必知必会实战练习（六）游标
游标主要用于交互式应用,滚动屏幕上的数据,并对数据进行浏览或做出更改 看一下下面的例子: drop procedure IF EXISTS processorders; create procedur ...
- hibernate缓存机制详解
hiberante面试题—hibernate缓存机制详解 这是面试中经常问到的一个问题,可以按照我的思路回答,准你回答得很完美.首先说下Hibernate缓存的作用(即为什么要用缓存机制),然后再 ...
- kali学习
kali视频学习 第二周 kali视频(1-5) 1.kali安装 2.基本配置 vmtools安装过程. 3.安全渗透测试一般流程 4.信息搜集之GoogleHack 5.信息搜集之目标获取 第三周 ...
- LeetCode Kill Process
原题链接在这里:https://leetcode.com/problems/kill-process/description/ 题目: Given n processes, each process ...
- web 模板引擎
baiduTemplate: http://baidufe.github.io/BaiduTemplate/ artTemplate: https://github.com/aui/artTempl ...
- openfaas cli 安装
1. 安装脚本 curl -sL https://cli.get-faas.com/ | sudo sh 备注安装完成之后如果没有 faas-cli 可以下载脚本,手工执行 2. 使用二进制 ...
- ORACLE系统表大全
下面全面是对Oracle系统表的一些介绍: 数据字典dict总是属于Oracle用户sys的. 1.用户: select username from dba_users; 改口令 alter user ...
- [翻译]Web开发牛人访谈：你们都在用什么？
小肥鱼译注:早上看到这篇文章,觉得内容甚是有趣.作者跟web开发方面的诸多大牛进行了交流,了解到他们的研究动向,从访谈中可以看到各种风格的开发者,有浏览器控,有设备控.我想,知道行业里的优秀成员在做些 ...
- 关于OPC自动化接口编程(OPCDAAuto.dll)几点注意问题
为了能够在工作中方便的应用OPC和充分的理解OPC的开发流程.内部机制,这两天正在研究开发OPC客户端程序,一般我们开发OPC客户端程序有以下几种方式: (1) 使用OPCNetAPI,需 ...