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 ...
随机推荐
- 20 几个知名公司的 Java 面试题汇总
查看不同公司新鲜真实的Java面试题,摘自Glassdoor.com 巴克莱投资: 假设有一个 getNextparson() 方法返回 Person 对象,Person 类实现了 comparabl ...
- javascript系列学习----对象相关概念理解
1.构造函数(相对于面向对象编程语言里面的类) 2.对象实例(它是由构造函数构造出来的对象,使用到关键字 new) 3.this关键字(往往是指我们的对象本身) 下面我们来看一个实例: var Per ...
- 数组与指针的区别，以及在STL中传递数组/指针
数组和指针在作为实参传入T[] 或T*的形参时没有区别 void f(int pi[]) { cout << sizeof(pi) << endl; } int a[5] = ...
- FPGA设计者必须精通的5项基本功
FPGA设计者的5项基本功:仿真.综合.时序分析.调试.验证. 对于FPGA设计者来说,练好这5项基本功,与用好相应的EDA工具是同一过程,对应关系如下: 1. 仿真:Modelsim, Quartu ...
- eclipse Mars（4.5.2）安装pydev后不出现
一.环境 windows 7 64bit eclipse 4.5.2 pydev jdk7u55 二.安装步骤 1. 安装JDK eclipse依赖于java环境,所以需要安装java运行环境JRE. ...
- bc显示小数点前的0
bc是强大而常用的计算工具.不过在除法运算时,如果得到的结果值小于1,得到的小数前面的0不存.本篇提供几个常用小数点前缺0的解决方法. [root@maqing ~]# bc bc Copyright ...
- litePal用法
1.依赖:在app/build.gradle文件中的depenencies{compile 'org.litepal.android:core:1.3.2'} 2.配置litePal.xml:右击ap ...
- CSV 参数化
配置CSV Data Set Config 图 3 配置CSV Data Set Config Filename: 指保存信息的文件目录,可以相对或者绝对 ...
- 第二章 伪分布式安装hadoop hbase
安装单机模式的hadoop无须配置,在这种方式下,hadoop被认为是一个单独的java进程,这种方式经常用来调试.所以我们讲下伪分布式安装hadoop. 我们继续上一章继续讲解,安装完先试试SSH装 ...
- 运维平台cmdb开发-day1
序读项目由来 终极目标,运维平台.自动化.装机,监控,安装软件,部署基础服务,资产管理,之前是excel,现在是客户端自动获取,变更记录 后台管理 api 采集资产 四种模式agent 定时,每天执行 ...