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 ...
随机推荐
- docx转doc时，防止公式被转成图片的解决办法
编辑社回复需要doc(Word 97-2003)格式的文档,可是将docx(Word 2007+)另存为doc格式时,发现公式被转成了图片.其实,最简单的办法就是,打个电话过去给编辑社:“大爷,拜托您 ...
- 时间由yyyy-MM-dd HH:mm:ss专为yyyy-MM-dd
(1)类用date 注意:如果用string会报错 页面无法使用string(...): (2)数据库表 (3)页面
- WPF XMAL获取元素的父元素，子元素
/// 获得指定元素的父元素 /// </summary> /// <typeparam name="T">指定页面元素</typeparam> ...
- SQL Server临时表的使用方案
文章来源:http://www.codesky.net/article/201007/145241.html 我们今天是要和大家一起讨论的是SQL Server临时表的实用大全,如果你对SQL S ...
- CSS书写格式
转自: https://segmentfault.com/a/1190000005046830 CSS书写格式 1.格式化代码 1.1文件 [建议]:CSS文件使用无BOM的UTF-8编码 1.2缩进 ...
- LeetCode Subarray Product Less Than K
原题链接在这里:https://leetcode.com/problems/subarray-product-less-than-k/description/ 题目: Your are given a ...
- 关于fft后图像的纵轴问题
fft后如果纵轴是abs后的值,且为双边图像,那么纵轴表示的就是此频率下信号的幅值*N/2的值,也就是说,如果有一正弦信号,幅度为1,假如fft了50个点,那么此信号频率的幅度就是1*50/2=25. ...
- 归并排序的JavaScript实现
思想 这是一种分治算法.将原始数组切分成较小的数组,直到每个小数组只有一项,然后在将小数组归并为排好序的较大数组,直到最后得到一个排好序的最大数组. 代码 function mergeSort(arr ...
- TXT
ANDRIOD: 192.168.199.119 data50803360 zc_3floor kk4836kk kahuna kk1626kk
- ADO+MFC数据库编程常用语句
设在OnInitDialog()函数中,已经完成了初始化COM,创建ADO连接等操作,即 // 初始化COM,创建ADO连接等操作 if (!AfxOleInit()) { AfxMessageBox ...