table 合并行和列
table合并行列，以及拆分
<!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 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 #000 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 () {
$("table tbody tr td").click(function () {
$(this).toggleClass("select");
}); var getColCount = function () {
var colspan = 0;
//获取选择的实际列数，包括合并的列
$(".select:first").parent().find(".select").each(function () {
if ($(this).attr("colspan") == undefined) {
colspan++;
} else {
colspan += parseInt($(this).attr("colspan"));
}
});
return colspan;
}
var getRowCount = function () {
var rowspan = 0;
//获取选择的实际行数，包括合并的行
var yIndex = $(".select:first").parent().index();
$("table tbody tr").has(".select").each(function () {
if ($(this).index() >= yIndex) {
var tr_first_checkd_td = $(this).find(".select:first");
if (tr_first_checkd_td.attr("rowspan") == undefined) {
rowspan++;
yIndex++;
} else {
rowspan += parseInt(tr_first_checkd_td.attr("rowspan"));
yIndex += parseInt(tr_first_checkd_td.attr("rowspan"));
}
}
});
return rowspan;
}
$("#merge").click(function () {
if (canMerge()) {
var colspan = getColCount();
var rowspan = getRowCount();
if (colspan != 1) {
$(".select:first").attr({ colspan: colspan });
}
if (rowspan != 1) {
$(".select:first").attr({ rowspan: rowspan });
}
$(".select:gt(0)").remove();
$(".select").removeClass("select");
} else {
alert("不能合并");
}
}); var canMerge1 = function () {
var rowCount = getRowCount();
var colCount = getColCount();
var totalCount = 0;
$(".select").each(function () {
var rowspan = 1;
var colspan = 1;
if ($(this).attr("rowspan") != undefined) {
rowspan = parseInt($(this).attr("rowspan"));
}
if ($(this).attr("colspan") != undefined) {
colspan = parseInt($(this).attr("colspan"));
}
totalCount += (rowspan * colspan);
}); return totalCount == rowCount * colCount;
}; var canMerge = function () {
//判断是否能合并，
//一，选择的td个数等于第一个和最后一个选择的td构成的方块的个数，
//二，所有选择的td的x和y轴的index都在第一个最后一个选中的td的index范围内
var first_X_Index = $(".select:first").index();
var first_Y_Index = $(".select:first").parent().index(); var last_X_Index = $(".select:last").index();
var last_Y_index = $(".select:last").parent().index();
var count = (last_X_Index - first_X_Index + 1) * (last_Y_index - first_Y_Index + 1);
var selectCount = $(".select").size();
//选择的td个数等于第一个和最后一个选择的td构成的方块的个数
var countEQ = count == selectCount;
//所有选择的td的x和y轴的index都在第一个最后一个选中的td的index范围内
var inRange = true;
for (var i = 0; i < $(".select").size(); i++) {
var x_index = $(".select").eq(i).index();
var y_index = $(".select").eq(i).parent().index();
if (x_index < first_X_Index || x_index > last_X_Index) {
inRange = false;
break;
} else if (y_index < first_Y_Index || y_index > last_Y_index) {
inRange = false;
break;
}
}
//return inRange && countEQ;
return true;
}; var getMin = function (colIndexs) {
var temp = 0;
for (var i = 0; i < colIndexs.length; i++) {
if (i == 0) {
temp = colIndexs[i];
} else {
if (colIndexs[i] < temp) {
temp = colIndexs[i];
}
}
}
} $("#split").click(function () {
//先补齐colspan,再补齐rowspan,最后删除选中的colspan和rowspan
$("table tr .select[colspan]").each(function () {
var colspan = parseInt($(this).attr("colspan"));
while (colspan > 1) {
var td = $("<td></td>");
td.click(function () {
$(this).toggleClass("select");
});
$(this).after(td);
colspan--;
}
}); $("table tr .select[rowspan]").each(function () {
var index = $(this).index() - 1;
var trIndex = $(this).parent().index() + 1;
var rowspan = parseInt($(this).attr("rowspan"));
if ($(this).attr("colspan") == undefined) {
while (rowspan > 1) {
var td = $("<td></td>");
td.click(function () {
$(this).toggleClass("select");
});
$("table tr").eq(trIndex).find("td").eq(index).after(td);
rowspan--;
trIndex++;
}
} else {
var colspan = parseInt($(this).attr("colspan"));
while (rowspan > 1) {
while (colspan > 0) {
var td = $("<td></td>");
td.click(function () {
$(this).toggleClass("select");
});
$("table tr").eq(trIndex).find("td").eq(index).after(td);
colspan--;
}
rowspan--;
trIndex++;
}
}
}); $(".select[rowspan]").removeAttr("rowspan");
$(".select[colspan]").removeAttr("colspan");
$(".select").removeClass("select");
}); $(".align").click(function () {
var textAlign = $(this).attr("gh-align");
$(".select").css("text-align", textAlign);
$(".select").removeClass("select");
}); $("#create").click(function () {
$("table tbody tr").remove();
var j = 1;
while (j < 20) {
var i = 1;
var tr = $("<tr></tr>");
while (i < 20) { var td = $("<td>" + j + "." + i + "</td>");
td.click(function (event) {
if (event.ctrlKey == 1) {
alert("ctrl");
}
$(this).toggleClass("select");
});
tr.append(td);
i++;
}
$("table").append(tr);
j++;
};
});
});
</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="左对齐" class="align" gh-align="left" />
<input type="button" value="居中" class="align" gh-align="center" />
<input type="button" value="右对齐" class="align" gh-align="right" />
</div>
<div class="body">
<table border="1" style="width: 100%;">
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
</tr>
<tr>
<td>
5
</td>
<td>
6
</td>
<td>
7
</td>
<td>
8
</td>
</tr>
<tr>
<td>
9
</td>
<td>
10
</td>
<td>
11
</td>
<td>
12
</td>
</tr>
<tr>
<td>
13
</td>
<td>
14
</td>
<td>
15
</td>
<td>
16
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
程序员的基础教程：菜鸟程序员
table 合并行和列的更多相关文章
- 【C#】Excel导出合并行和列并动态加载行与列
简单的Excel导出比较好做,只要设置表头,循环在表格中赋值添加数据即可,但是如果表头是不固定的,并且个数是不确定的,这就需要根据查询出数据的特点来添加导出了. 导出效果图: 如上图所示,商品的个数是 ...
- element-ui当中table组件的合并行和列的属性:span-method的用法
背景 最近基本上都是以Vue来构建项目,而UI框架也基本上都是使用的element-ui,所以里面组件用的也是越来越多,今天想记录的是非常非常小的一个属性的用法. Table组件 Table组件用了真 ...
- JavaScript遍历table的行和列
来源:http://blog.csdn.net/bobwu/article/details/7497412 <HTML> <head> <SCRIPT LANGUAGE= ...
- js实现table合并相同列单元格
/** * Created with JetBrains WebStorm. * User: Johnny * Date: 18-3-26 * Time: 下午4:48 * Table td 相同值合 ...
- jquery获取table指定行和列的数据(当前选中行、列)
//不多说,直接上代码.$("table tr").click(function() {//为表格的行添加点击事件 var tr = $(this);//找到tr原色 var td ...
- DataSet导出到Excel，并生成文件（C#实现，可合并行和列）
using System; using System.IO; using System.Data; using System.Reflection; using System.Diagnostics; ...
- table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- jQuery 选择表格(table)里的行和列及改变简单样式
本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...
- jQuery遍历Table表格的行和列
遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...
随机推荐
- git 清除本地无效的分支
远程服务器的分支已经删掉了,但是本地分支还存在 $ git fetch -p 如果不行,使用下面的指令 $ git remote prune origin
- 64位windows系统安装javaee6.0不成功解决方案
64位windows系统安装javaee6.0不成功解决方案 (2013-01-19 14:59:51) 转载▼ 标签: 杂谈 could not find the required versio ...
- (转)Inno Setup入门（十八）——Inno Setup类参考（4）
本文转载自:http://blog.csdn.net/yushanddddfenghailin/article/details/17251009 编辑框 编辑框也叫文本框,是典型的窗口可视化组件,既可 ...
- [Java.Web][Servlet]读取配置
private ServletConfig config; public void doGet(HttpServletRequest request, HttpServletResponse resp ...
- python学习 (三十) python的函数
1: 函数参数默认值 def method1(p1 = , p2 = ): // 函数有两个参数,并且都有默认值 return p1 + p2 print(method1()) print(meth ...
- 十九 yield方法
yield()方法的作用是放弃当前的CPU资源,让 其他任务占用CPU执行时间.但放弃时间不确定, 有可能刚刚放弃,马上又获得CPU时间片.
- 5月5日上课笔记-盒子模型【HTML5】
int 默认值为0 Integer 默认值为null String str="weraarezxsa"; 字符实现升序且唯一 & 非短路与 && 短路与 a ...
- 从windows拷贝到linux的脚本报错：未找到命令 or 语法错误
可能真的是命令拼错了或者参数有误,也可能是语法错误. 但是但是但是,如果之前脚本运行的好好的,没做任何改动或者仅仅改了一丁点儿. 那么脚本可能在格式上存在问题,解决方案: 安装dos2unix sud ...
- LinkedHashMap学习
一.概述 LinkedHashMap继承自HashMap,是Map接口的一个具体实现,它是有序的,可以按照插入顺序先后和访问时间先后进行排序,选择哪种排序方式取决于在新建LinkedHashMap的时 ...
- 【转】Android 中处理崩溃异常并重启程序出现页面重叠的问题
原文地址:http://blog.csdn.net/jiang547860818/article/details/53641113 android开发中经常会遇到程序异常,而已常常会遇到一出现异常AP ...